Floating items stacking not lining up!

[Mac Write]

As you can see here, The content and skyscraper ad aren't lining up beside the navigation, unless I specify a width for the content. I want to make the design liquid vs fixed width. What am I doing wrong? I am still brand new to CSS.

[Paul O'B]

Hi,

As you foundfloats need a width so the answer is just let the content be static and give it a margin left to clear the float.

You also need to address the padding on the ul as it is pushing ie wide.

.navigation
{
 list-style-type: none;
 list-style-position: inside;
 text-align: right;
 font-size: 12px;
 background-color: #FFC;
 margin:0;
 padding-left: 0px;
 float: left;
 width: 130px;
}
 .navigation li 
 {
 border-bottom: 1px solid black;
 border-right: 1px solid black;
 padding: 3px;
 margin:0;
 }
.navigation_header
{
 text-align: left;
 font-size: 12px;
 font-weight: bold;
 color: #FFF;
 background-color: #009;
}
#content
{
 text-align: left;
 padding-top: 10px;
 margin-left:140px;
}

You may wish to read my faq on floats which mentions the 3 pixel jog that affects floats. However it isn't always that noticable unless the layout is tight for space.

Paul

[Mac Write]

How do I get the ad on the right to float beside the content, without floating the content?

[Paul O'B]

Just float the add

Where do you want the add to be. Just float it righ or left as required. As it is an image it won't need a width and the content will automatically float around the ad.

Note that floated content must come before the element that wraps around it.

Is that what you meant

Paul