...

View Full Version : div not expanding in mozilla



jjshell
08-18-2005, 10:27 AM
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):


/* 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:


<!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>

mrruben5
08-18-2005, 11:09 AM
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.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum