DIV not floating correctly

[kriscons]

Hi

I am having a problem with displaying 2 DIV's in column format (i.e. DIV number 2 (#pagecontent) to the right hand side of DIV number 1 (#leftnavigation)). This only happens in Firefox and Opera.

My #pagecontent DIV needs to be an 'auto' width as the #leftnavigation DIV may not always be present. Therefore #pagecontent will need to expand and contract depending on its surround space. Simple eh?

I have the following markup:


<div id="contentcontainer">
<div id="leftnavigation">
<p>Navigation options will go here if enabled</p>
</div>
<div id="pagecontent">
<p>Page content will go here...</p>
</div>
</div>



Here is the CSS for the above markup:


#contentcontainer {
width: 560px;
padding: 0;
margin: 0;
min-height: 435px;
height: auto !important; /* min-height fix for IE6 */
height: 435px;
background: url(../images/content_gradient.jpg) top left no-repeat;
float: left;
}

#leftnavigation {
width: 140px;
margin: 10px 0 0 10px;
padding: 0;
float: left;
clear: none;
}

#pagecontent {
width: auto;
padding: 0;
margin: 0;
float: left;
}



The problem seems to be related to the content that is loaded into #pagecontent. The content itself seems to push the width of #pagecontent DIV to a size larger than what is available on the page and therefore knocks it down underneath the #leftnavigation DIV.

I have attached an illustration of my problem also.

Please help with any suggestions!!!
Ta in advance.

[dtm32236]

#leftnavigation {
width: 140px;
margin: 10px 0 0 10px;
padding: 0;
float: left;
clear: none;
}

#pagecontent {
width: auto;
padding: 0;
margin: 0;
margin-left:160px; add this
float: left; and remove this

}

let's see if that works...

[kbc1]

Thanks for your reply dtm32236 but all that does is set the margin to be constantly 160px in from the left hand side irrelevant if the navigation DIV is there or not.

I need the #pagecontent DIV to expand the width of the area if the #leftnavigation DIV is not needed.

[dtm32236]

oh - i dont know then....

whenever i have left navigation, i just float it left, and set the margin of the main content to the width of the navigation (as i did above) - but i've never dealt with - or even seen - navigation that can disappear.

[kriscons]

The page is dynamic and built from a database. If the page has sub menus then the menus are displayed. If not, then the DIV is hidden. Saves having loads of physical files for each page of the website.

not to worry. I'll figure it out.

[nickelleon]

well, I know why its doing that, but I dont know how to achieve the desired results. Floats remove elements from the normal document flow and allow text or other elements to wrap around them. Because of this, the need for a width on a floated div is crucial to control layout.

Width: auto is like saying "as wide as you can go". If an element is floated, then its taken out of the document flow. Since its out of the document flow, when calculating the width, it thinks it can go 100% because it can float around. So thats what it does, it floats down to the first spot in the document flow that it can be 100%.

If only there was a clear: bottom...

[dtm32236]

alright - you think that this can work? I'm not great with JavaScript - but I'm learning [slowly], and I have simple understanding of how to use it...

what if, with JS, you can detect whether the navagation is the or not, and do something like

if (navigationIsThere)
{
elem = document.getElementById("pagecontent");
elem.style.marginLeft='160px';
}
else
{
elem = document.getElementById("pagecontent");
elem.style.marginLeft='0';
}

that SEEMS like it would work - but then again, i'm terrible with JS, that just sounds logical and makes sense to me.