Using the follow css i'd like to make div#body-main_ automatically adjust itself to fill 100% of the remaining x-axis available. What is happening now is it's setting the width to the browser window width. here is an example of how it looks and how I need it to look: http://img242.imageshack.us/img242/2389/cssprob.jpg (the top is how it looks now, the bottom is how i need it) (letter c is div#body-main_, where i have the problem) div#body { position:relative; padding-top:5px; padding-bottom:5px; top:35px; height:50%; left:0px; background-color:#464646; } div#body-left-bar_ { float:left; width:41px; background-color:#333333; } div#body-nav_ { float:left; width:158px; background-color:#333333; } div#body-main_ { float:left; width:100%; background-color:#333333; } div#body-verticle-bar_ { float:left; width:23px; background:url(../images/body_verticle_bar.jpg) repeat-y top; } div#body-news_ { float:left; width:177px; background-color:#333333; } <div id="body"> <div id="body-left-bar_">a</div> <div id="body-nav_">b</div> <div id="body-main_">c</div> <div id="body-verticle-bar_">d</div> <div id="body-news_">e</div> </div> Code (markup):
1) it's generally sloppy/confusing to use as a class the name of a tag. That's a REALLY bad idea. 2) dicking around with div and CSS before you even have semantic markup of actual content (or even dummy content) is usually a waste of time. 3) What you are asking for is the default behavior of a block level element... so just don't float it! But really, without content to have semantic markup, you're probably spinning your wheels on nothing.
thanks for the tips. I have changed the floats to position:relative/absolute and the width appears to be ok. Now i'm only having the same problem with height If anyone has more tips on standardizing the code and/or solution to my problem, please let me know. entire css: http://pastebin.com/nFKEzfxz or non-highlighted: /* ============ MAIN STYLING ============= */ BODY, TD { font-family: Tahoma, Times New Roman, Arial; font-size:11px; color:#ffffff; background:#ffffff; } div,h1,img,a,ul,li,p { margin:0; padding:0; border:none; } a:link { text-decoration:none; color:#CCCCCC; } a:visited { text-decoration:none; color:#CCCCCC; } a:hover { text-decoration:underline; color:#CC6600; } a:active { text-decoration:none; color:#CCCCCC; } div#Table_01 { position:absolute; left:0px; top:0px; height:100%; width:100%; } div#btn { position:relative; margin-top:5px; left:39px; } div#btn .button { float:left; padding-top:10px; text-align:center; width:110px; height:35px; background-image:url(../images/btn_home.jpg); } div#btn .button a { color:#b28dd7; font-weight:bold; } div#btn .button a:hover { color:#ffffff; font-weight:bold; } div#header { position:relative; margin-top:5px; top:35px; height:268px; background:url(../images/header_bg.jpg) repeat-x top right; } div#header-left-bar_ { position:absolute; left:0px; width:39px; height:268px; } div#header-apple_ { position:absolute; left:39px; width:395px; height:268px; } div#header-father-son_ { position:absolute; right:0px; width:343px; height:268px; background:url(../images/header_father_son.jpg) no-repeat top right; } div#main { position:relative; padding-top:5px; padding-bottom:5px; top:35px; width:100%; height:100%; background-color:#464646; } div#main-left-bar_ { position:absolute; left:0; width:41px; height:100%; background-color:#333333; } div#main-nav_ { position:absolute; left:41px; width:158px; height:100%; background-color:#333333; } div#main-nav_ .nav_link { position:relative; top:25px; margin-bottom:15px; background-color:#464646; width:145px; height:1px; } div#main-nav_ .nav_link a { position:absolute; right:10px; top:-15px; color:#b28dd7; text-transform:uppercase; } div#main-nav_ .nav_link a:hover { color:#ffffff; } div#main-main_ { position:absolute; padding-top:10px; padding-left:5px; padding-right:5px; margin-left:199px; margin-right:190px; height:100%; background-color:#333333; } div#main-news_ { position:absolute; padding-top:10px; padding-left:5px; padding-right:5px; right:0px; width:177px; height:100%; color:#b28dd7; background-color:#333333; } div#footer { position:relative; top:35px; height:63px; padding-top:5px; } div#footer-top_ { position:absolute; left:0px; bottom:35px; height:38px; width:100%; background:url(../images/footer_top.jpg) repeat-x; } div#footer-bottom_ { position:absolute; left:0px; bottom:0px; height:35px; width:100%; background-color:#333333; } /*===================================================*/ Code (markup):
Define "problem with height" - are you saying you want it to expand to screen height if the content is shorter while growing larger than screen height if it's taller? If so that's called a "100% min-height" layout. Even with 100% min-height methods Generally you cannot make the elements themselves actually stretch to all be the same height without resorting to a table; HTML+CSS just doesn't work that way. You can however fake the appearance by using a background-image - this is called "faux columns" Though I'd have to see what you are trying to do for a layout to tell you how to approach that... as in the page with actual content and images.
I guess you're referring to the #body ID here, why would it be a "REALLY" bad idea to call it like that? One should be able to distinguish body { font-size: 12px; } Code (markup): from #body { font-size: 12px; } Code (markup): or .body { font-size: 12px; } Code (markup): I'd use <div id="body"></div> for a page wrapping div. Why is that bad, just because it's confusing to you? The guy wasn't spinning wheels on nothing, you probably just missed the point there. Sandstorm, goodle around and you should be able to find some really good examples of 2,3,4 column css layouts that will give a solution to your dilemma.