100% not working

adamjblakey

Hi,

Right i have just built a site which has 3 divs align to the left and in the outer 2 divs i have a background which i want to be a 100% so when the middle stretches so do the outer 2 but it does not happen. Please can you have a look at my code:

HTML
[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>title</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link href="includes/css/styles.css" rel="stylesheet" type="text/css" />
</head>
<body bgcolor="#FFFFFF">
<div id="main">
<div id="header"></div>
<div id="navigation"></div>
<div id="header_image"></div>
<div id="clearer"></div>

<div id="body">
<div id="left_body"></div>

<div id="middle_body">
<div id="middle_body_title">
<div id="middle_body_title_inner">
<h3>title</h3>
</div>
</div>

<div id="body_text">
<div id="body_text_inner">content here </div>
</div>

<div id="menu">
<div id="menu_inner"> content here </div>
</div>

</div>
<div id="right_body"></div>
</div>

<div id="footer">
<div id="footer_inner"> footer </div>
</div>

</div>
</body>
</html>
[/HTML]

CSS

Expand|Select|Wrap|Line Numbers

 
#main {width: 883px; margin: 0 auto; position: relative; padding:0px;}

#header { height:117px; background-image:url(../../images/royal-berkshire-header.jpg); padding:0px; margin:0px; }

#navigation { height:33px; background-image:url(../../images/navigation.jpg); margin:0px; padding:0px;}

#header_image { height:244px; background-image:url(../../images/carpet-banner.jpg);margin:0px; padding:0px;}
 
#body { height:100%; overflow:auto; }
 
#left_body { width:75px; height:100%; background:url(../../images/left-body.jpg) repeat-y; margin:0px; padding:0px; float:left; }

#middle_body { width:731px; height:100%; margin:0px; padding:0px; float:left;}
 
    #middle_body_title {height:50px; background:url(../../images/page-title.jpg); margin:0px; padding:0px;}

    #middle_body_title_inner { line-height:30px; margin:0px; padding:8px;}

    #middle_body_title_inner h3 { padding:0px; margin:0px; color:#615C44; font-size:18px; font-weight:normal; }
 
#right_body { width:77px; height:100%; background:url(../../images/right-body.jpg) repeat-y; margin:0px; padding:0px; float:left;}
 
    #body_text { width:507px; background:#FAF7E8; padding:0px; margin:0px; float:left; height:100%;}

    #body_text_inner { padding:8px; }
 
    #menu { width:224px; background:url(../../images/menu.jpg) repeat-y; padding:0px; margin:0px; float:left; height:100%;}

    #menu_inner { padding:8px; }

        #menu_inner ul { padding:0px; margin:0px; }

        #menu_inner li { padding:4px; margin:0px; border-bottom:1px solid #E1D9B9; list-style:none; }

    #menu_inner h3 { padding:0px; margin:0px; color:#615C44; font-size:18px; font-weight:normal; }
 
#footer {height:77px; text-align:center; background-image:url(../../images/footer.jpg); clear:both; font-size:11px;  padding:0px; margin-top:0px;}

    #footer_inner { padding:8px; padding-top:15px; }

    #footer_inner h2 { font-size:10px; font-weight:normal; padding:0px; margin:0px; }
 
#clearer {

    clear:both;

    line-height: 1px;

    font-size: 1px;

}

Cheers,
Adam

David Laakso

This going to be tedious. Bear with me.

Divisions have no margin or padding by default, so you can delete all instances of this in your style sheet.

Expand|Select|Wrap|Line Numbers

 
#whatever {

margin: 0px;

padding:0px;

...

}

becomes

#whatever {...}

All versions of Opera and all versions of IE trip on line height set in pixels. Re-set line-height as a raw number. For example:

Expand|Select|Wrap|Line Numbers

h1 {line-height: 2;}

Content determines height. Delete all instances of the following throuhgout the style sheet

Expand|Select|Wrap|Line Numbers

 
#whatever {

height: auto;

}

Re-set #main as follows in order to contain the floats within it (the border is to see it):

Expand|Select|Wrap|Line Numbers

 
#main {overflow: auto;}

to

#main {border: 1px solid #000; overflow: hidden;}

The yellow box is auto expanding in IE/6 causing it expand and drop the float. The correction is:

Expand|Select|Wrap|Line Numbers

 
#right_body {

float:right;

overflow-x: hidden;

}

STILL with me???

Add this to give the columns, asked about in your question, equal height:

Expand|Select|Wrap|Line Numbers

 
#left_body,

#right_body,

#body_text,

#body_text_inner {

padding-bottom : 32767px;

margin-bottom : -32767px;/*note minus sign*/

}

Add to position the footer on top of and paint over the columns:

Expand|Select|Wrap|Line Numbers

 
#footer {border-top: 1px solid #000;

position: relative;

z-index: 1;

#footer_inner,

#footer_inner h2 { 

background:#fff; 

}

Cross your fingers and hope neither of us forgot something....

100% not working

re: 100% not working

Similar HTML / CSS bytes

/bytes/development

/bytes/it

/bytes/about