Where Should I Clear My Floats?

LINK-
http://www.securehostserver.info/tnw/military/

If you take a look at the link listed above you see the div id “main” has an unordered list with a class applied to each list item that has “float: left;” as one of its properties. Apparently I do not understand where to clear the floats though. The footer graphic and footer text are now positioned in the wrong place (to see how those are placed correctly just view one of the other pages within the site). Can someone help me with where I should place the clear attribute and what div to apply it to? I have tried different scenarios and I keep getting a bad result.

Thanks in advance!

Todd

Hi,
You can contain your floats by setting overflow:hidden; on your #main div. It looks like you have your footer sitting outside of your main containing div so you would need to set auto margins on the footer to line it back up.

You also have an empty “p” tag before your footer that is keeping the borders form lining up, remove it.


[B]#main [/B]{
    width: 565px;
    margin: 0 1px;
    padding: 0 71px 0;
    border-top: 41px solid #0474AE;
    border-right: 1px solid #0474AE;
    border-left: 1px solid #0474AE;
    [COLOR=Blue]overflow:hidden;[/COLOR]
}

[B][COLOR=Black]#footer[/COLOR][/B] {
    background: url(../images/TNWEB_footer.gif);
    background-repeat: no-repeat;
    height: 71px;
    width: 710px;
    padding-top: 97px;
   [COLOR=Blue] margin: 0 auto;[/COLOR]
    text-align: center;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 9px;
    font-weight: bold;
    color: #000000;
    text-transform: uppercase;
}
 [COLOR=Red]<p> </p>[/COLOR]<<--Remove this
</div>
<div style="outline-color: rgb(255, 0, 0); outline-style: solid; outline-width: 1px;" [COLOR=Blue]id="footer"[/COLOR]>

Looking through your code again I see that it is the .item “li” that are floated. The proper way to contain them would be through the parent ul#items.

The same method as above will apply but in this case you would need to set “haslayout” for IE6/7, that can be done with a width.

You still need to tend to the footer as explained above though. :slight_smile:


[B]#items [/B]{
    list-style: none;
    margin: 0px;
    padding: 0px;
[COLOR=Blue]    overflow:hidden;/*float containment*/
    width:100%;/*IE haslayout/float containment*/[/COLOR]
}
[B][COLOR=Black].item[/COLOR][/B] {
    [COLOR=Blue]float: left;[/COLOR]
    margin: 0 20px 20px 0;
    width: 160px;
}

Rayzur,

Should I go back and remove the overflow:hidden from the #main div? Also, after I added the code, the individual list items are flowing in a weird way. I am wanting them to be three to a row but the columns are shifting a bit. Any reasons why? I really appreciate you looking into this for me!

Todd

Yes, you can remove the overflow:hidden on main div. About the li shifting, do you mean the fact that they don’t line up in pairs of three? That’s a float drop: the width isn’t enough to accommodate the floated list items. If you set a width of 155 px on .item, they should line up (only tested in FF).

I think I figured out the spacing issues for each list item. I added a height property to the item class and now each row is displaying three list items.

Still wondering if I should remove the overflow:hidden from the main div though.

Still wondering if I should remove the overflow:hidden from the main div though.

Hi,
It won’t hurt to leave it there, you may have floats in your #main div on other pages and then you will be set up for them already.

I added a height property to the item class and now each row is displaying three list items.

Yes, a defined height will keep the floats from hanging up. It is normal behavior for floats to hang if their heights are different.

The Problem with Floats and Unequal Heights

If you don’t want to set heights then you could use inline-block for your image captions.

Inline-Block Image Captions

although i prefer inline-block to floats, imho using that technique just for image captions is a bit over the top because it adds more to the code: support to IE6 and FF2 (which in the last case will make your css invalid. Reducing the width a bit also keeps the images inline … but i also might be rambling (suffering from the flue lol)

The same method as above will apply but in this case you would need to set “haslayout” for IE6/7, that can be done with a width.

Actually, if you’re not also writing for IE6, then lucky for us, setting overflow triggers haslayout in IE7.

This could remove a line of code if the page needed to work in IE7 but not in IE6.

Yes, a defined height will keep the floats from hanging up. It is normal behavior for floats to hang if their heights are different.

Oh, this took me a while… I call that “snagging” like your coat lines do when you’re getting off the bus and they catch on the door… Ouch.

I try to give those kinds of floats a min-height instead of a height for text-enlarge reasons. Or with a height, for IE6.

Since we are giving our humble opinions I’ll go ahead and express mine too. :slight_smile:

  1. Image captions are actually the idea place to use inline-block for the sake of avoiding float snag/hang due to dynamic heights. It allows you the freedom of not having to set height or min-height. Setting min-height requires another rule for IE6 to reset it back to “height” to simulate min-height.

  2. You then get the added bonus of having the vertical-align property available to you for the entire thumbnail div/element. I am free to line up the divs as either the top, bottom, or middle when I am in an inline-block display.

  3. The inline-block styles are really not very much code. I can set up a class for x-brwsr inline-block just once in my css and use it throughout the entire site. That class only needs to include the bare minimum and the elements can be styled further via specificity.

As far as invalid css with vendor-specific properties, that is nothing new and a seasoned coder will not be alarmed by it.

Just my 2 cents on the subject :slight_smile:

The class can be as simple as this:
(.ib=inline-block)

/*=== Inline-Block Class ===*/
.ib{
    display: -moz-inline-box;/* for FF2 and under*/
    display:inline-block;/* reset for modern browsers */
}
* html .ib{display:inline;}/* inline-block trigger for IE6 */
*+html .ib{display:inline;}/* inline-block trigger for IE7 */
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Cross Browser Inline-Block Class</title>

<style type="text/css">
body {
    background: #fff;
    font-size:100%;
    margin:0;
    padding:0;
}
h1 {
    text-align:center;
    margin:10px;
    font-size:1.6em;
}
p {margin:.5em;}

.caption {
    width:800px;
    margin:0 auto;
    background:#777;
    text-align:center;
}
.caption div {
    width:200px;
    margin:10px;
    background:#FFF;
    border:1px solid #000;
    vertical-align:top;
}
.caption div img{
    display:block;
    width:180px;
    height:120px;
    margin:10px auto;
    background:blue;
    color:#FFF;
}

/*=== Inline-Block Class ===*/
.ib{
    display: -moz-inline-box;/* for FF2 and under*/
    display:inline-block;/* reset for modern browsers */
}
* html .ib{display:inline;}/* inline-block trigger for IE6 */
*+html .ib{display:inline;}/* inline-block trigger for IE7 */

</style>
</head>
<body>
<h1>Cross Browser Inline-Block Class</h1>
<div class="caption">
    <div class="ib">
        <img src="thumbnail.jpg" alt="Tumbnail Img"/>
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nunc commodo lorem ut justo.</p>
    </div>
    <div class="ib">
        <img src="thumbnail.jpg" alt="Tumbnail Img"/>
        <p>Duis purus diam, gravida et, mattis eget, semper ac, tellus. Suspendisse velit nunc, varius ut, pharetra malesuada, suscipit ut, lacus.</p>
    </div>
    <div class="ib">
        <img src="thumbnail.jpg" alt="Tumbnail Img"/>
        <p>Ut molestie libero quis massa elementum tristique. Aliquam erat volutpat.</p>
    </div>
    <div class="ib">
        <img src="thumbnail.jpg" alt="Tumbnail Img"/>
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nunc commodo lorem ut justo.</p>
    </div>
    <div class="ib">
        <img src="thumbnail.jpg" alt="Tumbnail Img"/>
        <p>Duis purus diam, gravida et, mattis eget, semper ac, tellus. Suspendisse velit nunc, varius ut, pharetra malesuada, suscipit ut, lacus.</p>
    </div>
    <div class="ib">
        <img src="thumbnail.jpg" alt="Tumbnail Img"/>
        <p>Ut molestie libero quis massa elementum tristique. Aliquam erat volutpat.</p>
    </div>
</div>

</body>
</html>

As long as we’re being humble, seems i need to adjust my humble opinion :wink:
To be honest, i didn’t pay attention to the captions when i posted my reply (flue is being mushing my brain up).

And i do like the class method you suggest :slight_smile:

Whether the coder is seasoned or not… well lol :smiley:

The Seasoned Coder (hmm, that could be a soap opera) recognises vendor extensions for what they are: simply unrecognised by the validator.

There is a problem with inline-block… not in the above scenario but when you have more blocks… as Gary showed me, if the thing you’re making inline-block is a block and has block children, you have to do a lot more messing around in the CSS to deal with those block children… FF2 really destroys any set of blocks, letting the inner children run amok : (

I no longer have the code that showed all the CSS necessary to get everyone working in FF2 with multiple block children, since I ended up not using that scenario for a client, but it was enough for me to consider telling FF2 users to suck it up and deal with it : )

Imho (again lol) they are a bit more then simply unrecognized by the validator: they are extensions made by vendors for several reasons (experimenting, debugging, testing features that have not yet reached Candidate Recommendation status…,) As a side effect, the validator doesn’t validate them. Which says a lot about the W3C: it’s allowed for vendors to come up with vendor extensions when they use the W3C defined format: the name must begin with a dash or underscore. On the other hand, it doesn’t validate but it would be logical that they would be simply marked as a warning. I personally like the solution Chris pointed out in the validation debate: that the validator would mark them as what they simply are (no pun intended ;)): experimental.