Achieving a properly aligned sidebar in a DIV layout

Question

I'm experimenting with DIVs to align my page's contents: http://labs.pieterdedecker.be/test/test.htm

As you can see, there's something wrong with the sidebar. I got the sidebar DIV to be aligned to the right of the page by doing float: right, but when the text in the sidebar stops the main area takes over the width that should be used by the sidebar.

How do I fix this?

Answer 1

You give the main area a width.

Answer 2

Hi, I supose what you want to accomplish is to separate the #body div in 2 columns. First of all it will be easier if you package main column in its own div like this:

<div id="body">
    <div id="sidebar">lorem ipsum...</div>
    <div id="main">lorem ipsum...</div>
</div>

and then give #main div a width.

If you need to preserve your markup, then ALL #body elements other than #sidebar must have a width.

Another solution that would work if page is static and it's content will not "grow" is to set a big-enough heigth to the sidebar...

maybe what you are looking for is equal height columns... there are some differente method to do this... just google for it or take a look at this: http://matthewjamestaylor.com/blog/equal-height-columns-cross-browser-css-no-hacks