Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New Coder
    Join Date
    Jan 2005
    Posts
    93
    Thanks
    4
    Thanked 0 Times in 0 Posts

    div not expanding in mozilla

    hello

    my centrecontent div is not expanding in mozilla. Does anyone know why? I used the height:auto trick for mozilla though... I would be so grateful of someone could shed some lights.

    css (styles.css):
    Code:
    /* mac hide\*/
    /*CHECK IF 100% all the TIME*/
    html, body {height:100%}
    /* end hide */
    
    html,body {
    padding:0;
    margin:0;
    }
    
    body{
    text-align:center;
    min-width:750px;/* for mozilla*/
    background-color: #E2EBED;
    color: #333 ;
    }
    
    #outer{
    height:500px;
    min-height:500px;
    width:750px;
    background-color: #fff;
    text-align:left;
    margin:auto;
    position:relative;
    }
    
    html>body #outer{height:auto;} /*for mozilla as IE treats height as min-height anyway*/
    
    #header{
    position:absolute;
    margin-top:10px;
    background: url("images/logo.png") center center no-repeat;
    top:0;
    left:0;
    width:750px;
    height:170px;
    background-color:#fff;
    overflow:hidden;
    color: #333;
    z-index:100;
    }
    
    #centrecontent{
    width:540px;
    float:right;
    padding-top:190px;
    }
    
    html>body #centrecontent{height:auto;} /*for mozilla as IE treats height as min-height anyway*/
    
    #left {
    position:relative;/*ie needs this to show float */
    width:210;
    float:left;
    padding-top:190px;
    }
    
    div,p  {margin-top:0}/*clear top margin for mozilla*/
    
    html >body #minHeight{float:left;width:0px;height:100%;margin-bottom:-0px;} /*safari wrapper */
    html:
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>
    coprodega, layout demo
    </title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <link rel="stylesheet" href="styles.css" type="text/css" media="screen, projection" />
    </head>
    
    <body>
    <div id="minHeight"></div>
    <div id="outer"> 
    <div id="centrecontent">
    <h1>
    title
    </h1>
    <p>
    some textsome textsome textsome textsome textsome textsome textsome textsome text
    some textsome textsome textsome textsome textsome textsome textsome textsome text
    some textsome textsome textsome textsome textsome textsome textsome textsome text
    some textsome textsome textsome textsome textsome textsome textsome textsome text
    </p>
    <h1>
    title
    </h1>
    <p>
    some textsome textsome textsome textsome textsome textsome textsome textsome text
    some textsome textsome textsome textsome textsome textsome textsome textsome text
    some textsome textsome textsome textsome textsome textsome textsome textsome text
    some textsome textsome textsome textsome textsome textsome textsome textsome text
    </p>
    <h1>
    title
    </h1>
    <p>
    some textsome textsome textsome textsome textsome textsome textsome textsome text
    some textsome textsome textsome textsome textsome textsome textsome textsome text
    some textsome textsome textsome textsome textsome textsome textsome textsome text
    some textsome textsome textsome textsome textsome textsome textsome textsome text
    </p>
    </div><!-- end centercontent -->
    <div id="left">
    <ul>
    <li>
    <a href="#">Initio</a>
    </li>
    <li>
    <a href="#">Cursos</a>
    </li>
    <li>
    <a href="#">Documentacion</a>
    </li>
    <li>
    <a href="#">Organizacion</a>
    </li>
    <li>
    <a href="#">Servicios</a>
    </li>
    </ul>
    </div><!-- end left -->
    <div id="header"> 
    </div><!-- end header -->
    </div><!-- end outer -->
    </body>
    </html>

  • #2
    Regular Coder
    Join Date
    Nov 2004
    Location
    The Netherlands
    Posts
    551
    Thanks
    0
    Thanked 0 Times in 0 Posts
    This is not a bug, this is how browsers should operate. floated elements are out of the normal document flow.

    http://www.positioniseverything.net/easyclearing.html

    But you could also put overflow:auto on the conatiner wich isn't stretching, but it is buggy in some browsers.
    CATdude about IE6: "All your box-model are belong to us"


  •  

    Posting Permissions

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