No replies
Tallmadge, OH
Last seen: 17 years 43 weeks ago
Tallmadge, OH
Joined: 2004-07-24
Posts: 33
Points: 0

I'm working on a revamp of a client's site and am on my fifth attempt in trying to lay it out and use pure CSS...I'm used to tables or a mix of tables and CSS. I've had a stack of the latest CSS books at my side, checked out online resources, etc - now I'm calling on others to maybe pick at the code and see if I'm missing something...

The page is at:

In IE6 the main column of content won't line up to the side of the navigation, and the optional sidebar within the content area follows after the main content.

In Firefox the content will line up with the navigation, but the sidebar follows after....the sidebar should be level with the top of the content.

Here are the parts of the CSS that I think you'd need to peek at:

#navigation {
	width: 125px;
	float: left;
	margin: 0px;
	padding: 90px 0px 0px 0px;
#main {
	width: 641px;
	margin: 0;
	padding: 0 16px 0 125px;
#content {
	margin: 0;
	padding: 94px 0 0;
	background-image: url(../graphics/roses_vase.jpg);
	background-repeat: no-repeat;
	background-position: left bottom;
.twoColumn {
	margin: 0;
	padding: 94px 0 0;
	width: 415px;
.sidebar {
	width: 215px;
	margin: 0px;
	padding: 0 0 0 420px;
	position: relative;
	top: 0px;
	float: right;

The entire CSS file is at

.twoColumn is an optional class on the ID "content" - I'm hoping this is the right way to have a sidebar optionally tucked in where needed.

#content, .twoColumn and .sidebar are all within #main, and #navigation is a div before the #main div. #navigation and #main both reside within a #container div, which is centered on the page.