Need to keep DIVS from Overlapping

My “contentmain” and “sidebar” divs are overlapping. How do I fix?

it seem fine to me. its a small page.

may be due to black background i m not able to see overlaping.

which browser are you checking it in


I don’t see it overlapping either. I’m viewing in Opera 10.

Your #contentmain is sliding under your sidebar because floats are removed from the normal page flow. You will need to float #contentmain also then you will see it’s full width as it floats next to the sidebar. :wink:

You had overflow:auto on your Content which will contain floats, overflow:hidden will do the same without the possibility of giving scrollbars.

[COLOR=Black]#content[/COLOR] {
[COLOR=Blue]overflow:hidden; /*contain floats*/[/COLOR]
width: 900px;
margin: auto;
#sidebar {
[COLOR=Blue]float: left;[/COLOR]
background: #ffffff;
width: 175px;
border-right: 3px #000000 solid;
#contentmain {
background: #ffffff;
width: 722px;

Stomme Poes has a demo set up with an opaque sidebar. It will show you how static blocks slide under floats while the text within them does not.

You can also set overflow:hidden; on a static block to keep the background color from sliding under a float.

Thank you for your input, guys! I took Rayzur’s suggestion. That did it.