Centre 2 Divs

Discussion in 'Web Design and Development' started by 20rogersc, Aug 11, 2007.

  1. 20rogersc macrumors 65816

    20rogersc

    Joined:
    Jun 28, 2005
    Location:
    Brighton, UK
    #1
    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!?

    [​IMG]
    [+] Click To Enlarge

    Thanks.
     
  2. pengu macrumors 6502a

    Joined:
    Mar 20, 2005
    Location:
    Diddily Daddily...
    #2
    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.
     
  3. 20rogersc thread starter macrumors 65816

    20rogersc

    Joined:
    Jun 28, 2005
    Location:
    Brighton, UK
    #3
    Thanks, I'll give it a go.
    Edit: Cheers, it's working fine.
     

Share This Page