Quick CSS help - stopping divs overlapping

Discussion in 'Web Design and Development' started by joe8232, Aug 9, 2008.

  1. joe8232 macrumors regular

    Joined:
    Jun 21, 2005
    #1
    I am having some problems with a couple of div's on a webpage I am developing. The site is here.

    The problem is with the bottom div - it seems to overlap the two above it. The CSS I have used is:

    #leftNav {
    width:170px;
    padding:0;
    margin-right:10px;
    float:left;
    }
    #center {
    float:left;
    background-color:#fff;
    color:#000;
    width:680px;
    padding:15px 15px 15px 15px;
    margin-bottom:30px;
    margin-left:10px;
    margin-top:20px;
    }
    #footer {
    clear:both;
    width:100%;
    padding:2px 2px 2px 2px;
    border-top:1px dashed #2E4C6F;
    border-bottom:1px dashed #2E4C6F;
    }

    EDIT: I can fix it by adding margin-bottom:150px to leftNav but I really don't understand why that fixes it.
    Any help would be much appreciated.
     
  2. angelwatt Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #2
    The problem is you define #leftNav twice.
    Code:
    /* LeftNav bar */
    #leftNav {
    	width:170px;
    	height:300px;
    	padding:0;
    	margin-right:10px;
    	float:left;
    	margin-bottom:100px;
    	margin-top:0;
    }
    /* LeftNav bar */
    #leftNav {
    	width:170px;
    	padding:0;
    	margin-right:10px;
    	float:left;
    }
    Combine these together then get ride of the height property and adjust the margin-bottom appropriately. Also, I noticed that the reference to list.css returned a 404 error. Something to look into.
     
  3. joe8232 thread starter macrumors regular

    Joined:
    Jun 21, 2005
    #3
    Thanks for that - such a stupid mistake :p Will look into that 404 as well. Thanks again
     

Share This Page