The world's simplest float, that I can't figure out!

HTML & CSS
1

Hi,

I’ve played with this and tried clearing floats, floating left, right, and everything and can’t make it work. I’ve read Floatutorial and a couple of others and obviously I’m missing something.

The problem is with the <div id=“photo”>. It needs to be alongside the nav. It has to stay a div because I need to use some javascript to rotate images in a div.

Can anyone see what I can’t? :confused:

http://ehydrant.com/test.html

Thanks guys.

2

Hi,

Floats must come first before the block elements that you want them to wrap.

Either move the photo up the html above the nav or better still float the nav as well and kill the 3px jog in ie6 at the same time.


#nav {
    width:227px;
    padding:15px 0;
    list-style:none;
    overflow:hidden;
    background: url(graphics/nav.jpg); /* IE6 Flicker Fix */
[B]float:left;[/B]
}
3

Thanks Paul.

I took the clear of the photo div and put float:left on the nav and it works, except IE7 puts some space under the nav. Why?

Also, I just don’t understand exactly what you mean by:

If the nav is float: left, how is that wrapping the photo? Do you mean causing the photo div to wrap (left) relative to the nav?

Thanks.

4

There isn’t a space as such under the nav it’s just that the nav is smaller in IE7. If you expect that elements will always be the same height then this will rarely be the case once rounding issues have been taken into account.

You would need to control every aspect including line-height and even then there would be differences.

If you want the nav to match the image then you could give it a height to match exactly.

e.g.


#nav {
    width:227px;
    padding:15px 0;
    list-style:none;
    overflow:hidden;
    background:url(http://ehydrant.com/graphics/nav.jpg); /* IE6 Flicker Fix */
    float:left;
    [B]height:330px;[/B]
}

Or wrap the image and the nav in a div that has an orange background and then no height would be needed and the layout could expand if required.

Also, I just don’t understand exactly what you mean by:

If the nav is float: left, how is that wrapping the photo? Do you mean causing the photo div to wrap (left) relative to the nav?

Thanks.

I’m not sure what you don’t understand but when you float an element the content following a float will always wrap around the float assuming there is room. That’s how floats work :slight_smile:

The content that goes before a float will not wrap around a float otherwise the float would disappear through the top of the monitor.

When you float an element it float left or right form where it is horizontally. It will only rise upwards if it is also next to or follows another float. It will not rise up if static content is above it in the html.

5

Hi, first validate the HTML, then on the <li> inside #nav, only set a margin one direction to avoid margin collapse. Right now, #nav simply just isn’t 360px (the height of hte photo) and thus you are seeing a bit of white space under #nav :slight_smile:

Edit:

Paul beat me I see

6

That was my “Aha” moment.

Thanks Paul!

7

What was or is the problem? I am too much a newbie to understand what is going on. Thanks

8

The problem was was that the left vertical nav just wasn’t high enough to have no whitespace under it. The image was 360px, the #nav had 30px total vertical padding so it had to have 330px height (330+30=360). It didn’t have that mucfh.

He COULD change #navbar’s background to orange and give it overflow:hidden; (it is collapsed currently because #nav and the #photo are floated)

9

Thank you for that explanation Mr. Guru of 2009! :wink:

I looked up float as well.

The float property specifies whether or not a box (an element) should float.