Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home › Forums › CSS › 3 left-floated divs are not sitting next to one another, not respecting fixed-width

  • This topic is empty.
Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • June 10, 2013 at 7:48 am #45422
    laraortiz
    Member

    Hi,
    I’m trying to get 3 divs (.1col) of equal width to float next to one another. They are inside a container that is 720px wide, and each div is set to 228px wide, plus 1 px border and 10px right margin. The container (#content) has 0 margin, 0 border and 0 padding.

    No matter what I have tried, the class=”1col” divs will not respect the width I have set. If they have no content inside them, they shrink, and if they have content, they expand as wide as the content.

    CodePen is here: http://codepen.io/laraortiz/pen/aimyE or see code below.

    Thanks!

    Possibly relevant styles:

    * {
    margin: 0;
    border: 0;
    padding: 0
    }
    p {
    font-family: Arial, Helvetica, sans-serif;
    color: #000;
    font-size: 12px;
    line-height: 16px;
    margin-bottom: 16px;
    }
    #content {
    width: 720px;
    margin: 0;
    padding: 0;
    border:0;
    }
    .1col {
    width: 228px;
    margin: 0 10px 10px 0;
    }
    .2col {
    width: 468px;
    margin: 0 10px 10px 0;
    }
    .3col {
    width: 708px;
    margin: 0 10px 10px 0;
    }
    .greybox {
    background-color: #F6F6F6;
    border: 1px solid #DAD8D8;
    }
    .bluebox {
    background-color: #F6F6F6;
    border: 1px solid #DAD8D8;
    }
    .left {
    float: left;
    }
    .right {
    float: right;
    }
    .innerpadding {
    padding: 10px;
    width:auto;
    }
    .clear {
    clear: both;
    }

    HTML:

    Lorem ipsum

    Lorem ipsum

    Lorem ipsum dolor sit amet consectetur. Lorem ipsum dolor sit amet consectetur. Lorem ipsum dolor sit amet consectetur.

    This is an h2.

    This is the h3 style.

    This is a test of the emergency broad

    This is a test of the emergency broad

    This is a test of the emergency broad

    June 10, 2013 at 7:57 am #138194
    Paulie_D
    Member

    You can’t start class names with a number.

    Try .col-1 instead of .1col

    June 10, 2013 at 9:18 am #138203
    rodolpheb
    Participant

    To support Paulie_D’s comment:

    [W3C recommendation](http://www.w3.org/TR/CSS21/syndata.html#characters “W3c specification”)”In CSS, identifiers (including element names, classes, and IDs in selectors) can contain only the characters [a-zA-Z0-9] and ISO 10646 characters U+00A0 and higher, plus the hyphen (-) and the underscore (_); they cannot start with a digit, two hyphens, or a hyphen followed by a digit. Identifiers can also contain escaped characters and any ISO 10646 character as a numeric code (see next item). For instance, the identifier “B&W?” may be written as “B&W?” or “B26 W3F”.

    June 10, 2013 at 4:01 pm #138231
    laraortiz
    Member

    Thanks so much. That solved it. I figured it might be some rule I didn’t know, because I’m pretty much teaching this to myself by inspecting CSS around the web. Much appreciated.

  • Author
    Posts
Viewing 4 posts - 1 through 4 (of 4 total)
  • The forum ‘CSS’ is closed to new topics and replies.