PDA

View Full Version : Floating divs in a logical order, can it be done?



lithriel
Aug 14th, 2007, 10:49 PM
http://www.ashleywalters.net/clarus/

I have made a three column layout above. The second column (#optionalcolumn) is nested within the content div with a float:right declaration. I want this column to go towards the end of the content div in my code but the only way I can seem to get it to display correctly is to put the optional column before the main content div in my code. I would, however, like my work to be semantic and follow a logical order.

Perhaps there is an easy solution to this. Any suggestions?

Entire CSS file: http://www.ashleywalters.net/clarus/css/style.css

Relevant Layout CSS:

body
{
padding: 0;
margin: 0;
}


#wrapper, #banner, #navbar {width: 100%;}

#wrapper
{
min-width: 755px;
}

#banner
{
height: 109px;
background: #7f1101 url(../images/tab.gif) no-repeat bottom right;
}

#navbar
{
border-top: 1px solid black;
height: 75px;
background: url(../images/navbar.gif) repeat-x;
}

#content
{
width: 70%;
margin: 2em;
}

#rightcolumn
{
width: 20%;
margin: -1em 2em 4em 2em;
position: absolute;
top: 200px;
right: 0;
}

#optionalcolumn
{
margin: 2em;
float: right;
width: 30%;
}



Relevant XHTML:



<div id="content">
<div id="optionalcolumn">
<h3>Another Header</h3>
<p>This column is optional.</p>
</div>
<h1><em>Header Here</em></h1>
<p>I need the optional column to go below this information but before the footer</p>
<div id="footer">
<p>Content here</p>
</div>
</div>

Thank you for your time