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 <!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 #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; } Code (markup): Cheers, Adam
Good god, man, do you have enough divs in there? You're suffering from a classic case of divitis. Trying to find problem code is like trying to pick out the albino cat from all the white ones. Anyway, what do you mean about 100%? 100% width? height? Background images generally don't stretch, though HTML images can (you can set their heights and widths to % in the HTML and they will stretch and shrink to fit their parents). Question, did you start out coding in tables? This looks like how many people code when they switch from tables to divs. Rule of thumb: for every td there was, there doesn't need to be a div. Divs should pretty much just be lumping together big chunks of other code. Nesting further than 3 is likely a sign of evil and Impending Doom (though it depends on the situation). Can you post some images of what you want to happen when the page grows?
Yes i did used to code in tables can you tell I have uploaded the site here so you can take a look at the problem. http://www.adamblakey.com/test/ Have a look in IE because there is some problems in firefox at the moment. Cheers, Adam