SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Wizard
    Join Date
    Jan 2005
    Location
    blahblahblah
    Posts
    1,447
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Mozilla and div not expanding.

    Every time I start a layout, I'm like "yeah, I'm gonna make it right". And every time pretty much the same problems occur. And every time I think I can solve them. But every time I get lost. maincontent div does not expand in mozilla.

    Code:
    <style type="text/css">
    * {margin:0;padding:0;}
    
    body {	
    text-align:center;
    }
    
    
    #container {
    position: relative;
    margin:auto;
    width:700px;
    background-color:red;
    height: 200px;
    min-height: 200px;
    text-align:left;
    }
    
    html>body #container{height:auto;}/*for mozilla*/
    
    #header {
    background-color:white;
    }
    
    #maincontent {
    position:relative;
    float:left;
    width:500px;
    }
    
    #verticlanavigation {
    position:relative;
    float:right;
    }
    
    #footer {
    clear: both;
    position: absolute;
    left:0;
    bottom:0;	
    }
    
    </style>
    
    <body>
    
    <div id="container">
    
        <div id="header">header</div>
    
        <div id="maincontent">
        maincontent 
        
        maincontent 
        
        maincontent 
        
        maincontent 
        
        maincontent 
        
        maincontent 
        
        maincontent 
    
    
        maincontent 
        
        maincontent 
        
        maincontent 
        
        maincontent 
        
        maincontent 
        
        maincontent 
        
        maincontent 
        
        maincontent 
        
        maincontent 
        
        maincontent 
        
        maincontent 
        
        maincontent 
        
        maincontent 
        
        maincontent 
        
        maincontent 
        
        maincontent 
        
        maincontent 
        
        maincontent 
    
        maincontent 
    
        maincontent 
        
        maincontent 
    
        maincontent 
        maincontent 
        
        maincontent 
        
        maincontent 
        
        maincontent 
        
        maincontent 
    
    
        maincontent 
        
        maincontent 
        
        maincontent 
        
        maincontent 
        
        maincontent 
        
        maincontent 
        
        maincontent 
        
        maincontent 
        
        maincontent 
        
        maincontent 
        
        maincontent 
        
        maincontent 
        
        maincontent 
        
        maincontent 
        
        maincontent 
        
        maincontent 
        
        maincontent 
        
        maincontent 
    
        maincontent 
    
        maincontent 
        
        maincontent 
    
        maincontent 
        maincontent 
        
        maincontent 
        
        maincontent 
        
        maincontent 
        
        maincontent 
    
    
        maincontent 
        
        maincontent 
        
        maincontent 
        
        maincontent 
        
        maincontent 
        
        maincontent 
        
        maincontent 
        
        maincontent 
        
        maincontent 
        
        maincontent 
        
        maincontent 
        
        maincontent 
        
        maincontent 
        
        maincontent 
        
        maincontent 
        
        maincontent 
        
        maincontent 
        
        maincontent 
    
        maincontent 
    
        maincontent 
        
        maincontent 
    
        maincontent 
        maincontent 
        
        maincontent 
        
        maincontent 
        
        maincontent 
        
        maincontent 
    
    
        maincontent 
        
        maincontent 
        
        maincontent 
        
        maincontent 
        
        maincontent 
        
        maincontent 
        
        maincontent 
        
        maincontent 
        
        maincontent 
        
        maincontent 
        
        maincontent 
        
        maincontent 
        
        maincontent 
        
        maincontent 
        
        maincontent 
        
        maincontent 
        
        maincontent 
        
        maincontent 
    
        maincontent 
    
        maincontent 
        
        maincontent 
    
        maincontent 
        maincontent 
        
        maincontent 
        
        maincontent 
        
        maincontent 
        
        maincontent 
    
    
        maincontent 
        
        maincontent 
        
        maincontent 
        
        maincontent 
        
        maincontent 
        
        maincontent 
        
        maincontent 
        
        maincontent 
        
        maincontent 
        
        maincontent 
        
        maincontent 
        
        maincontent 
        
        maincontent 
        
        maincontent 
        
        maincontent 
        
        maincontent 
        
        maincontent 
        
        maincontent 
    
        maincontent 
    
        maincontent 
        
        maincontent 
    
        maincontent 
        maincontent 
        
        maincontent 
        
        maincontent 
        
        maincontent 
        
        maincontent 
    
    
        maincontent 
        
        maincontent 
        
        maincontent 
        
        maincontent 
        
        maincontent 
        
        maincontent 
        
        maincontent 
        
        maincontent 
        
        maincontent 
        
        maincontent 
        
        maincontent 
        
        maincontent 
        
        maincontent 
        
        maincontent 
        
        maincontent 
        
        maincontent 
        
        maincontent 
        
        maincontent 
    
        maincontent 
    
        maincontent 
        
        maincontent 
    
        maincontent 
        maincontent 
        
        maincontent 
        
        maincontent 
        
        maincontent 
        
        maincontent 
    
    
        maincontent 
        
        maincontent 
        
        maincontent 
        
        maincontent 
        
        maincontent 
        
        maincontent 
        
        maincontent 
        
        maincontent 
        
        maincontent 
        
        maincontent 
        
        maincontent 
        
        maincontent 
        
        maincontent 
        
        maincontent 
        
        maincontent 
        
        maincontent 
        
        maincontent 
        
        maincontent 
    
        maincontent 
    
        maincontent 
        
        maincontent 
    
        maincontent 
        maincontent 
        
        maincontent 
        
        maincontent 
        
        maincontent 
        
        maincontent 
    
    
        maincontent 
        
        maincontent 
        
        maincontent 
        
        maincontent 
        
        maincontent 
        
        maincontent 
        
        maincontent 
        
        maincontent 
        
        maincontent 
        
        maincontent 
        
        maincontent 
        
        maincontent 
        
        maincontent 
        
        maincontent 
        
        maincontent 
        
        maincontent 
        
        maincontent 
        
        maincontent 
    
        maincontent 
    
        maincontent 
        
        maincontent 
    
        maincontent 
        maincontent 
        
        maincontent 
        
        maincontent 
        
        maincontent 
        
        maincontent 
    
    
        maincontent 
        
        maincontent 
        
        maincontent 
        
        maincontent 
        
        maincontent 
        
        maincontent 
        
        maincontent 
        
        maincontent 
        
        maincontent 
        
        maincontent 
        
        maincontent 
        
        maincontent 
        
        maincontent 
        
        maincontent 
        
        maincontent 
        
        maincontent 
        
        maincontent 
        
        maincontent 
    
        maincontent 
    
        maincontent 
        
        maincontent 
    
        maincontent 
        maincontent 
        
        maincontent 
        
        maincontent 
        
        maincontent 
        
        maincontent 
    
    
        maincontent 
        
        maincontent 
        
        maincontent 
        
        maincontent 
        
        maincontent 
        
        maincontent 
        
        maincontent 
        
        maincontent 
        
        maincontent 
        
        maincontent 
        
        maincontent 
        
        maincontent 
        
        maincontent 
        
        maincontent 
        
        maincontent 
        
        maincontent 
        
        maincontent 
        
        maincontent 
    
        maincontent 
    
        maincontent 
        
        maincontent 
    
        maincontent 
        maincontent 
        
        maincontent 
        
        maincontent 
        
        maincontent 
        
        maincontent 
    
    
        maincontent 
        
        maincontent 
        
        maincontent 
        
        maincontent 
        
        maincontent 
        
        maincontent 
        
        maincontent 
        
        maincontent 
        
        maincontent 
        
        maincontent 
        
        maincontent 
        
        maincontent 
        
        maincontent 
        
        maincontent 
        
        maincontent 
        
        maincontent 
        
        maincontent 
        
        maincontent 
    
        maincontent 
    
        maincontent 
        
        maincontent 
    
        maincontent 
        maincontent 
        
        maincontent 
        
        maincontent 
        
        maincontent 
        
        maincontent 
    
    
        maincontent 
        
        maincontent 
        
        maincontent 
        
        maincontent 
        
        maincontent 
        
        maincontent 
        
        maincontent 
        
        maincontent 
        
        maincontent 
        
        maincontent 
        
        maincontent 
        
        maincontent 
        
        maincontent 
        
        maincontent 
        
        maincontent 
        
        maincontent 
        
        maincontent 
        
        maincontent 
    
        maincontent 
    
        maincontent 
        
        maincontent 
    
        maincontent 
        maincontent 
        
        maincontent 
        
        maincontent 
        
        maincontent 
        
        maincontent 
    
    
        maincontent 
        
        maincontent 
        
        maincontent 
        
        maincontent 
        
        maincontent 
        
        maincontent 
        
        maincontent 
        
        maincontent 
        
        maincontent 
        
        maincontent 
        
        maincontent 
        
        maincontent 
        
        maincontent 
        
        maincontent 
        
        maincontent 
        
        maincontent 
        
        maincontent 
        
        maincontent 
    
        maincontent 
    
        maincontent 
        
        maincontent 
    
        maincontent 
        maincontent 
        
        maincontent 
        
        maincontent 
        
        maincontent 
        
        maincontent 
    
    
        maincontent 
        
        maincontent 
        
        maincontent 
        
        maincontent 
        
        maincontent 
        
        maincontent 
        
        maincontent 
        
        maincontent 
        
        maincontent 
        
        maincontent 
        
        maincontent 
        
        maincontent 
        
        maincontent 
        
        maincontent 
        
        maincontent 
        
        maincontent 
        
        maincontent 
        
        maincontent 
    
        maincontent 
    
        maincontent 
        
        maincontent 
    
        maincontent 
        maincontent 
        
        maincontent 
        
        maincontent 
        
        maincontent 
        
        maincontent 
    
    
        maincontent 
        
        maincontent 
        
        maincontent 
        
        maincontent 
        
        maincontent 
        
        maincontent 
        
        maincontent 
        
        maincontent 
        
        maincontent 
        
        maincontent 
        
        maincontent 
        
        maincontent 
        
        maincontent 
        
        maincontent 
        
        maincontent 
        
        maincontent 
        
        maincontent 
        
        maincontent 
    
        maincontent 
    
        maincontent 
        
        maincontent 
    
        maincontent </div>
    
        <div id="verticalnavigation">verticalnavigation</div>
    
        <div id="footer">footer</div>
    
    </div>
    
    </body>

  2. #2
    CSS & JS/DOM Adept bronze trophy
    Join Date
    Mar 2005
    Location
    USA
    Posts
    5,482
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You need to clear it. The clear property on #footer is useless because #footer is absolutely positioned.

    I suggest you read up on clearing and containing floats.
    We miss you, Dan Schulz.
    Learn CSS. | X/HTML Validator | CSS validator
    Dynamic Site Solutions
    Code for Firefox, Chrome, Safari, & Opera, then add fixes for IE, not vice versa.

  3. #3
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,122
    Mentioned
    29 Post(s)
    Tagged
    2 Thread(s)
    Hello,

    You have some unnecessary code in there..
    Code:
    height: 200px;
    min-height: 200px;
    If you are wanting to ensure that the container is a minimum height of 200px but can grow larger if it needs to then you need to use
    Code:
    #container {
      min-height: 200px;
    }
    * html #container {
      height: 200px; /* IE6 and below treat height as min-height */
    }
    The reason the background in your page isn't showing is because you are floating it's contents and removing them from the flow of the document - Floats need to be cleared
    adding overflow: hidden; to your #container div will make it self clearing.
    There are many clearing methods outlined in the FAQ about floats at the top of the CSS forum.
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <title>Untitled Document</title>
    <style type="text/css">
    * {margin:0;padding:0;}
    body {	
    	text-align:center;
    }
    #container {
    	margin:auto;
    	width:700px;
    	background-color:red;
    	text-align:left;
    	overflow: hidden;
    }
    #header {
    	background-color:white;
    }
    #maincontent {
    	float:left;
    	width:500px;
    }
    #verticlanavigation {
    	float:right;
    }
    #footer {
    	clear: both;
    	position: absolute;
    	left:0;
    	bottom:0;	
    }
    </style>
    </head>
    <body>
    <div id="container">
      <div id="header">header</div>
      <div id="maincontent">maincontent maincontent maincontent maincontent maincontent maincontent maincontent maincontent maincontent maincontent maincontent maincontent maincontent maincontent maincontent maincontent maincontent maincontent maincontent maincontent maincontent maincontent maincontent maincontent maincontent maincontent maincontent maincontent maincontent maincontent maincontent maincontent maincontent maincontent maincontent maincontent maincontent maincontent maincontent maincontent maincontent maincontent maincontent maincontent maincontent maincontent maincontent maincontent maincontent maincontent maincontent maincontent maincontent maincontent maincontent maincontent maincontent maincontent maincontent maincontent maincontent maincontent maincontent maincontent maincontent maincontent maincontent maincontent maincontent maincontent maincontent maincontent maincontent maincontent maincontent maincontent maincontent maincontent maincontent maincontent maincontent maincontent maincontent maincontent maincontent maincontent maincontent maincontent maincontent maincontent maincontent maincontent maincontent maincontent maincontent maincontent maincontent maincontent maincontent maincontent maincontent maincontent maincontent maincontent maincontent maincontent maincontent maincontent </div>
      <div id="verticalnavigation">verticalnavigation</div>
      <div id="footer">footer</div>
    </div>
    </body>
    </html>


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •