Sidebar isn’t flush with main content

[bzsim]

I have been struggling with this problem for a while and have posted in other forums with no solution. Hopefully someone has one here.

I am using a template from Dreamweaver CS3 – the three column fixed. It comes with a sidebar1 on the left, main content in the middle, and sidebar2 on the right. My issue is with the height of the sidebars. They do not extend to always be flush with the main content. For example, if the middle main content extends past the content of the sidebars, the sidebars remain where they are, appearing shorter. This is a problem when I have the sidebars a different background color than the main content.

The template says "The background color on this div will only show for the length of the content. If you’d like a dividing line instead, place a border on the left side of the #mainContent div if it will always contain more content." I don’t see how this fixes things.

I have tried setting the div height to 100% and in other areas and it has not worked. Right now I’m having to set the height manually in pixels on each page to stay flush with the main content. I’m sure there is an easier way to do this automatically.

Any thoughts or suggestions?

Thanks!

[TheDoc]

There are TONS of solutions for this, including many outlined in this very forum! Search is your friend! So is Google!

Throw this into a search on Googs:

"equal height column css"

[Roughnite]

if your 3 divs are inside a container div, i would recommend trying to "stick" the divs to the top and bottom of the container div

for example:

Code:

content

content

content

css:

Code:

#box1 {
left: 0px;
top: 0px;
bottom: 0px;
}
#box2 {
top: 0px;
bottom: 0px;
}
#box3 {
top: 0px;
right: 0px;
bottom: 0px;
}

theres definately a bit more to this css code (margins, floats etc) but thats basically how it should work, unless i am mistaken

[Author]

Posts