Geek Answers Handbook

CSS Layout Question

I cannot find a way to make this work for me.

If I have 3 divs (left sidebar, main body and footer), how can I set the sidebar and main body next to each other without setting their positions as “absolute” or floating? Executing any of these options causes the footer to not be pushed by one or the other.

How can I accomplish this, regardless of what happens before these elements (like another div header or something else)?

In case this helps, here is an illustration of two cases that I am trying to resolve:

alt text http://www.nickawilliams.com/files/layout.jpg

Here's the simplified version of HTML I just installed:

<div id="sidebar"></div> <div id="content"></div> <div id="footer"></div>
+7
html css xhtml
source share
3 answers

You need to specify a footer to clear the float:

 #footer{ clear: both; }

This causes it to be under floating elements.

Other cleaning options are left and right.

+18
source share

Doing any of these parameters cause the footer div to not be shifted by one or the other?

Try this tool

+1
source share

You are pretty hopeless right now if you don't want to swim and use the position: absolute.

Other alternatives:

  • use display: built-in block for the sidebar and content sections (not yet supported by all browsers)
  • wait for the extended css build module or some other column module (forever)
  • back to using tables
0
source share

More articles:


All Articles