1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

CSS Float overflowing the page container

Discussion in 'HTML, Graphics & Programming' started by theMAD2, 30 Jan 2006.

  1. theMAD2

    Hitman

    Joined: 2 Aug 2005

    Posts: 680

    Code:
    #contents {
    	width:700px;
    	margin-left:auto;
    	margin-right:auto;
    	text-align:justify;
    	background-image:url(images/contmid.gif);
    }
    
    #conttop {
    	background-image:url(images/conttop.gif);
    	height:15px;
    }
    
    #contmid {
    	background-image:url(images/contmid.gif);
    	background-color:#FFFFFF;
    	padding-left:20px;
    	padding-right:20px;
    	height:auto;
    	visibility: visible;
    }
    
    #contbot {
    	background-image:url(images/contbot.gif);
    	height:16px;
    	background-color:#FFFFFF;
    }
    
    #menu {
    	width:135px;
    	margin-right:20px;
    	margin-bottom:10px;
    	float:left;
    }
    
    #menutop {
    	background-image:url(images/menutop.gif);
    	height:10px;
    }
    
    #menumid {
    	background-image:url(images/menumid.gif);
    	height:auto;
    	padding:2px;
    }
    
    #menubot {
    	background-image:url(images/menubot.gif);
    	height:22px;
    	width:135px;
    	clear:left;
    }
    
    I've got this CSS for my page layout (there is more, but this is the bit with the problem). The page contents is stored within the contmid div, and the menu contents is in the menumid div. As I add items to the menu the menu expands, but if there isn't enough contents in the contmid div the menu overlaps the container. Is there anyway to get around this without using hacks? Thanks a lot.
     
  2. iCraig

    PermaBanned

    Joined: 21 Apr 2004

    Posts: 13,314

    Location: Wolverhampton

    Code:
    min-height: ?px;
     
  3. theMAD2

    Hitman

    Joined: 2 Aug 2005

    Posts: 680

    My bad, I put the clear:left; in the menubot instead of the contbot. Seems fine now :)