Become a MacRumors Supporter for $50/year with no ads, ability to filter front page stories, and private forums.

20rogersc

macrumors 65816
Original poster
Jun 28, 2005
1,144
0
Brighton, UK
Right, I've just started working on my portfolio website, and trying to pick up CSS as I go. I've searched and tried numerous ways of doing this, but haven't found a way that seems to work. I need to be able to make these two divs centre the page. This is the relevant code that I have at the moment, assuming it is correct!?

Code:
#navleft {
	height: auto;
	width: 200px;
	background-color: #333333;
	margin-right: 10px;
	margin-top: 15px;
	text-align: left;
	padding-top: 15px;
	padding-right: 10px;
	float: left;
	padding-bottom: 15px;
	padding-left: 10px;
}
#contentright {
	float: left;
	height: auto;
	width: 560px;
	background-color: #333333;
	padding-top: 15px;
	padding-right: 10px;
	padding-bottom: 15px;
	padding-left: 10px;
	max-height: 90%;
	margin-top: 15px;
	text-align: left;
	max-width: 560px;
}

This is what it looks like at the moment, but I just need the whole lot centred.
Please could the response be explained as much as possible!?


[+] Click To Enlarge

Thanks.
 
first off, an MSIE fix. set the text-align of the parent (probably body) to center.

next, create a "container" div that is wide enough to fit the two content boxes, and give it left and right margins of "auto".

put the nav and content divs (you could improve accessibility by making the Nav an unordered list) inside the container div.

oh and you'll need to re-set the text-align to left (or justify) for MSIE, on the container object. i suggest conditional comments to include an MSIE-specific css file.
 
Register on MacRumors! This sidebar will go away, and you'll see fewer ads.