Need to keep DIVS from Overlapping

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

http://retrocitysunglasses.com/newblank3.html

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

vineet

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

Hi,
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 {
[COLOR=Blue]float:left;[/COLOR]
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.
http://stommepoes.nl/floaties.html

You can also set overflow:hidden; on a static block to keep the background color from sliding under a float.
http://www.pmob.co.uk/temp/floats-wrap-under.htm

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