Hello, I have a situation where I need a div to expand to fill its parent, only when a another div is not present. The code below is what I want it to look like when the blue div is there: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>Untitled Document</title> </head> <body> <div style="width: 985px; border: 1px solid #F00;"> <div style="min-width: 785px; float: left; display: inline; height: 900px; background: #500;"> <p></p> </div> <div style="width: 200px; display: inline; float: right; height: 500px; background: #005;"> </div> <div style="clear: both;"></div> </div> </body> </html> HTML: When the red divs contents start to make it expand it pushes the blue div below red div. I need the blue div to stay put. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>Untitled Document</title> </head> <body> <div style="width: 985px; border: 1px solid #F00;"> <div style="min-width: 785px; float: left; display: inline; height: 900px; background: #500;"> <p>TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST</p> </div> <div style="width: 200px; display: inline; float: right; height: 500px; background: #005;"> </div> <div style="clear: both;"></div> </div> </body> </html> HTML: And when the blue div is not present I need the red div to expand to fill the parent. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>Untitled Document</title> </head> <body> <div style="width: 985px; border: 1px solid #F00;"> <div style="min-width: 785px; float: left; display: inline; height: 900px; background: #500;"> <p>TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST</p> </div> <!--<div style="width: 200px; display: inline; float: right; height: 500px; background: #005;">--> </div> <div style="clear: both;"></div> </div> </body> </html> HTML: Thank you for any help
Alright i think what you need to do. is instead of using varying pixels you need to use Percentages for your widths. basically something like #someshit{ width:30%; maxwidth:; minwidth:; } Basically for your second comment give the red a max width attribute IN PERCENTAGES so that it cant push old bluey down. And then because you are using percentages. Depending on how you have your containers setup red should move accross with the right percentages when blue no longer exists.... I think that made sense
Ok got it now. Two key elements to making this work: 1) Place the floated div ahead if the content div 2) clear the content div. And it worked <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>Untitled Document</title> </head> <body> <div> <div style="width: 985px; border: 1px solid #F00;"> <div style="width: 200px; float: right; height: 500px; background: #005;"> </div> <div style="clear: left; height: 900px; background: #500; overflow: hidden;"> <p>TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST</p> </div> <div style="clear: both;"></div> </div> </div> </body> </html> HTML:
Fixing the heights is ALWAYS a miserable /FAIL/ at design - at least on things like content areas and sidebars. You can never guarantee the height of the content moving forward, so fixing the height is guaranteed to SOMEDAY break. Testing the styles inlined just makes a mess of things, I would NEVER do that even during development, especially spaced like that since it's nigh impossible to tell what's an attribute, what's a property - it's a mess. You've got a clearing DIV for no good reason - easy enough to axe. and your 'test' area when it's content ends up longer than the sidebar will end up wrapping UNDER it instead of staying in it's own column. Don't know if you wanted that, I'm assuming not. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html><head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title> Untitled Document </title> <style type="text/css"> * { margin:0; padding:0; } #container { width:985px; /* also trips haslayout, so floats should be wrapped */ overflow:hidden; /* wrap floats */ border:1px solid #F00; } #sideBar { float:right; width:200px; background:#005; } #content { margin-right:200px; } </style> </head><body> <div id="container"> <div id="sideBar"> Test Sidebar content <!-- #sideBar --></div> <div id="content"> <p> TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST </p> <!-- #content --></div> <!-- #container --></div> </body></html> Code (markup): Is how I'd clean that up.