100% not working

Collapse
X
Collapse
 
  • Page of 1
  • Time
  • Show
Clear All
new posts
Previous template Next
  • adamjblakey
    New Member
    • Jan 2008
    • 133
    #1

    100% not working

    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.dt d">
    <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="#FFFFF F">
    <div id="main">
    <div id="header"></div>
    <div id="navigation" ></div>
    <div id="header_imag e"></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_i nner">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_inne r"> footer </div>
    </div>

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

    CSS
    Code:
    #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
    Tags: None
    • David Laakso
      Recognized Expert Contributor
      • Aug 2008
      • 397
      #2
      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.
      Code:
      #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:
      Code:
      h1 {line-height: 2;}
      Content determines height. Delete all instances of the following throuhgout the style sheet
      Code:
      #whatever {
height: auto;
}
      Re-set #main as follows in order to contain the floats within it (the border is to see it):
      Code:
      #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:
      Code:
      #right_body {
float:right;
overflow-x: hidden;
}
      STILL with me???

      Add this to give the columns, asked about in your question, equal height:
      Code:
      #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:
      Code:
      #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....

        Comment

        Previous template Next
        Working...