Three column layout overlapping

[dmacster]

I have three columns that must be positioned below some other layers on a page (500px) and cannot get the three columns to NOT overlap. Right most column keeps floating over the middle (contentMain) one.

Relevant CSS below. Any help appreciated.

div#sidebar {
	position: absolute;
	top: 500px;
	width: 33%;
	display: block;
	padding: 10px;
	left: 0%;
}
div#contentMain {
	position: absolute;
	top: 500px;
	width: 34%;
	display: block;
	padding: 10px;
	border: 1px solid #FBC033;
	left: 33%;
}
div#contentRight {
	position: absolute;
	top: 500px;
	width: 33%;
	display: block;
	border-right-width: 1px;
	border-right-style: solid;
	border-right-color: #FBC033;
	padding: 10px;
	border-top-width: 1px;
	border-bottom-width: 1px;
	border-top-style: solid;
	border-bottom-style: solid;
	border-top-color: #FBC033;
	border-bottom-color: #FBC033;
	left: 67%;
}

Thanks,
Donna

 

[Vragabond]

I would move away from absolutely positioned solution to using floats. Absolutely positioned elements are sort of like post-it notes in the book. They are completely unaware of where the rest of the content is and vice versa. Using regular flow will help you control overlapping much easier.

 

[dmacster]

I'll give it a try - I saw something with floats, but couldn't get it to work for my page.

Thanks - I'll let you know if it works.