Menu
I have these nested divs and I need the main container to expand (in height) to accommodate the DIVs inside
<!-- head --> ... <!-- /head --> <body class="main"> <div id="container"> <div id="header"> <!--series of divs in here, graphic banner etc. --> </div> <div id="main_content"> <!-- this DIV _should_ stretch to accommodate inner divs --> <div id="items_list" class="items_list ui-sortable"> <div id="item_35" class="item_details"> </div> <div id="item_36" class="item_details"> </div> <div id="item_37" class="item_details"> </div> <!-- this list of DIVs "item_xx" goes on for a while each one representing a photo with name, caption etcetc --> </div> </div> <br class="clear"/> <div id="footer"> </div> </body> </html> CSS is this:
* { padding: 0; margin: 0; } .main { font: 100% Verdana, Arial, Helvetica, sans-serif; background: #4c5462; margin: 0; padding: 0; text-align: center; color: #000000; } .main #container { height: auto; width: 46em; background: #4c5462; margin: 0 auto; border: 0px solid #000000; text-align: left; } .main #main_content { padding: 5px; margin: 0px; } #items_list { width: 400px; float: left; } .items_list { width: 400px; float: left; } .item_details { margin-top: 3px; margin-bottom: 3px; padding: 3px; float: left; border-bottom: 0.5px solid blue; } The problem I have is that #main_content doesn't stretch to accommodate all the inner divs, with the result that they keep going against the background.
How can I solve this problem considering the above scenario?
825
For the height of a div to be responsive, it must be inside a parent element with a defined height to derive it's relative height from. If you set the height of the container holding the image and text box on the right, you can subsequently set the heights of its two children to be something like 75% and 25%.
Use absolute positioning and instead of setting the offset with top use bottom . With this property you can ensure the position of the bottom edge of your div - any change in size will force the div to expand upwards.
If height: auto; the element will automatically adjust its height to allow its content to be displayed correctly. If height is set to a numeric value (like pixels, (r)em, percentages) then if the content does not fit within the specified height, it will overflow.
The width property is used to fill a div remaining horizontal space using CSS. By setting the width to 100% it takes the whole width available of its parent. Example 1: This example use width property to fill the horizontal space. It set width to 100% to fill it completely.
You need to force a clear:both before the #main_content div is closed. I would probably move the <br class="clear" />; into the #main_content div and set the CSS to be:
.clear { clear: both; } Update: This question still gets a fair amount of traffic, so I wanted to update the answer with a modern alternative using a new layout mode in CSS3 called Flexible boxes or Flexbox:
body { margin: 0; } .flex-container { display: flex; flex-direction: column; min-height: 100vh; } header { background-color: #3F51B5; color: #fff; } section.content { flex: 1; } footer { background-color: #FFC107; color: #333; }<div class="flex-container"> <header> <h1> Header </h1> </header> <section class="content"> Content </section> <footer> <h4> Footer </h4> </footer> </div>Most modern browsers currently support Flexbox and viewport units, but if you have to maintain support for older browsers, make sure to check compatibility for the specific browser version.
74
Try this: overflow: auto;
It worked for my problem..
26
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
