Float Left, Float Right Confusion

HTML & CSS
1

Hi Guys,

So I’ve been reading a tutorial on fluid grids A List Apart: Articles: Fluid Grids and I get 99% of what’s been said…but one thing is bugging me a little because I can’t figure the reason behind it. So the layout in question is http://www.alistapart.com/d/fluidgrids/img/comp-full.gif constructed from the following html markup;


<div id="page">
    <h1>The Ratio Revolution Will Not Be Televised</h1>

    <div class="entry">
        <h2>Anyone else tired of Helvetica?</h2>

        <h3 class="info">A <a href="#">Blog</a> Entry:</h3>

        <div class="content">
            <div class="main">
                <p>Main content goes here. Lorem ipsum etc., etc.</p>
            </div><!-- /end .content -->

            <div class="meta">
                <p>Posted on etc., etc.</p>
            </div><!-- /end .meta -->
        </div><!-- /end .main -->
    </div><!-- /end .entry -->
</div><!-- /end #page -->

My question is in relation to part of the styling…more specifically


.entry h2,
.entry .content {
    float: right;
    width: 85.425%;          /* 844px / 988px = 0.85425 */
}

.entry .info {
    float: left;
    width: 12.551%;          /* 124px / 988px = 0.12551 */
}

I don’t get why class “entry” is floated right and then left rather than simply floated left from the start. See I get that <h2>Anyone else tired of Helvetica?</h2> shares a div with <h3 class=“info”>A <a href=“#”>Blog</a> Entry:</h3> but is it not possible to just float the class .info left rather than floating its parent .entry both right and left?

Thanks,
M.

2

Ok, .entry isn’t floated right or left. It’s a static box unless there are some styles for it somewhere (I’m going to assume they do something to make it enclose its floats… if they did float it somewhere, that would make it enclose floated children).

From what you posted (I didn’t bother looking at the List Apart link, it’s late here), .entry is a box containing stuff on the right and stuff on the left.

.entry h2, .entry .content { means the h2 within .entry, and the box called .content within .entry… but not .entry itself.
.entry .info { means just the h3 who is within .entry.

the h2 and .content are floated right and given a ridiculous width (browsers are going to do something between 85% and 86% or so, but nobody’s going to be precise like that… not the smartest thing if the .entry container is in px width), while the .info is floated left.

http://stommepoes.nl/comp-fullboxes.gif

red is .entry, yellow is h2 and .content, green is the h3. If those are clear.

Because the h2 comes first in source before the h3, if you want them to look like they’re sitting side by side, you float them both, in opposite directions. Otherwise, if only the h2 is floated, the h3 may remain underneath it (depends on the browser and whether there are margins and Haslayout on them). If the h3 is floated, it still stays underneath. By limiting their widths (so they never overlap) and floating them both, they can ride up alongside each other.

.content is floated to create that “gutter” look under the h3, and is given the same width as the h2 so they all line up. Though it could have remained a static box, cleared the floats above it, and had a left margin equal to the “gutter” width of 12-ish %. Maybe there was another reason they floated that.

Multiple ways to skin, cook, and eat cats. All are tasty. Some may create browser bugs in certain situations, though, so eventually you start doing things a certain way most of the time just so you don’t have to hack stuff.

BTW the comments in the HTML are mis-matched:


   <div class="content">
            <div class="main">
                <p>Main content goes here. Lorem ipsum etc., etc.</p>
            </div><!-- /end .content -->

            <div class="meta">
                <p>Posted on etc., etc.</p>
            </div><!-- /end .meta -->
        </div><!-- /end .main -->

.content can’t end BEFORE it’s child .main ends. Children must end before their containers. Otherwise you get <i>sometag<b>bold</i></b> which is illegal in every possible way. Even HTML 3.2!

3

@ Stomme poes…thanks. Nicely explained. Think what was confusing me was
the class .entry being a static box rather than the div #page. Would this work too?

4

.entry needs some way to enclose it’s floated children.

The simplest method would be to make .entry float.

You could also use something like the clearfix (where you apply clear: both using :after on the element), but this is a bit trickier and less supported.

Now, if you’re saying you would make #page float and leave .entry static would half work. #page would contain the children, but .entry wouldn’t. You could see this if you gave #page a background of one color and .entry of another color. You’ll probably see .entry either be short (wrapping just around it’s non-floated children) or it may disappear completely (if everything was floating).

Once again, that could be prevented by using clear: both at some point (perhaps on .meta), but that’s a bit trickier than just making .entry float.

5

overflow hidden !!!