cs.punk Posted August 13, 2010 Share Posted August 13, 2010 Basically what it comes down to: I want to stretch the second div to occupy the remaining space. Width: 100% brings the width to the actual width of the browser 'window' so that won't work.. Any ideas? <div style="width: 200px; background-color: #CCCCFF; float: left;">hello1</div> <div style="background-color: #CCCCCC; float: left;">hello2</div> Thank you guys. [attachment deleted by admin] Link to comment https://forums.phpfreaks.com/topic/210623-how-do-i-strech-a-floated-div-to-the-remaining-space/ Share on other sites More sharing options...
linus72982 Posted August 14, 2010 Share Posted August 14, 2010 How many pixels are left after you minus the 200 from the first div? Just make the width that number. Or, you could make the first div a percentage (like width: 20%) and make the second div the "rest of the percentage", IE: width: 80%. Link to comment https://forums.phpfreaks.com/topic/210623-how-do-i-strech-a-floated-div-to-the-remaining-space/#findComment-1099109 Share on other sites More sharing options...
cs.punk Posted August 14, 2010 Author Share Posted August 14, 2010 How many pixels are left after you minus the 200 from the first div? Just make the width that number. Or, you could make the first div a percentage (like width: 20%) and make the second div the "rest of the percentage", IE: width: 80%. But this won't accommodate different screen resolutions... Link to comment https://forums.phpfreaks.com/topic/210623-how-do-i-strech-a-floated-div-to-the-remaining-space/#findComment-1099133 Share on other sites More sharing options...
linus72982 Posted August 15, 2010 Share Posted August 15, 2010 I was going off the assumption you had a fixed pixel width wrapper div like 90% of the websites out there, it's rare you see a full page width page anymore. Well, if you have a full page, the percentages will still work for you. Link to comment https://forums.phpfreaks.com/topic/210623-how-do-i-strech-a-floated-div-to-the-remaining-space/#findComment-1099445 Share on other sites More sharing options...
dbrimlow Posted August 19, 2010 Share Posted August 19, 2010 Quick and dirty way (assuming you used inline styling to illustrate the issue) ... add a left margin to second div and remove the float. <div style="width: 200px; background-color: #CCCCFF; float: left;">hello1</div> <div style="background-color: #CCCCCC; margin:0 0 0 200px ">hello2</div> But it is ugly because inline styling is foolish (for troubleshooting, scaling, page load) and proper text content tag defaults (paragraphs, lists, headers) will blow it up. Try it, simply place hello1 and hello2 into paragraph tags. <div style="width: 200px; background-color: #CCCCFF; float: left;"><p>hello1</p></div> <div style="background-color: #CCCCCC; margin:0 0 0 200px "><p>hello2</p></div> Now imagine THAT with a whole page of content! Here is the one of a number of better solutions: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title>quick, fixed left /fluid right columns</title> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <style type="text/css"> body, p {margin:0; padding:0} /*zero out browser defaults */ .left {width: 200px;background-color: #CCCCFF; margin:0; padding:5px; float: left} .right {background-color: #CCCCCC; margin:0 0 0 200px; padding:5px 20px;} </style> </head> <body> <div class="left"><p>hello1</p></div> <div class="right"><p>hello2</p></div> </body> </html> Link to comment https://forums.phpfreaks.com/topic/210623-how-do-i-strech-a-floated-div-to-the-remaining-space/#findComment-1101080 Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.