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?
I would just use
height: auto;
in your div. Yes, I know I'm a-little late but I figured this might help somebody like it would have helped me if it was here.
If you are using jQuery UI, they already have a class the works just a charm
add a <div> at the bottom inside the div that you want expand with height:auto;
then add a class name ui-helper-clearfix or use this style attribute and add just like below:
<div style=" clear:both; overflow:hidden; height:1%; "></div>
add jQuery UI class to the clear div, not the div the you want to expand.
I know this is kind of old thread, however, this can be achieved with min-height CSS property in a clean way, so I'll leave this here for future references:
I made a fiddle based on the OP posted code here: http://jsfiddle.net/U5x4T/1/, as you remove and add divs inside, you'll notice how does the container expands or reduces in size
The only 2 things you need to achieve this, additional to the OP code is:
*Overflow in the main container (required for the floating divs)
*min-height css property, more info available here: http://www.w3schools.com/cssref/pr_dim_min-height.asp
Have you tried the traditional way? give the main container height:auto
#container{height:auto}
I have used this and it worked most of the times with me.
add the following:
overflow:hidden;
height:1%;
to your main div. Eliminates the need for the extra <br /> for the clear.
Looks like this works
html {
width:100%;
height:auto;
min-height:100%
}
It takes the screen size as minimum, and if the content expands it grows.
I tried pretty much every suggestion listed above and none of them worked. However, "display: table" did the trick for me.
I'm running into this on a project myself - I had a table inside a div that was spilling out of the bottom of the div. None of the height fixes I tried worked, but I found a weird fix for it, and that is to put a paragraph at the bottom of the div with just a period in it. Then style the "color" of the text to be the same as the background of the container. Worked neat as you please and no javascript required. A non-breaking space will not work - nor does a transparent image.
Apparently it just needed to see that there is some content below the table in order to stretch to contain it. I wonder if this will work for anyone else.
This is the sort of thing that makes designers resort to table-based layouts - the amount of time I've spent figuring this stuff out and making it cross-browser compatible is driving me crazy.
This problem arises when the Child elements of a Parent Div are floated. Here is the Latest Solution of the problem:
In your CSS file write the following class called .clearfix along with the pseudo selector :after
.clearfix:after {
content: "";
display: table;
clear: both;
}
Then, in your HTML, add the .clearfix class to your parent Div. For example:
<div class="clearfix">
<div></div>
<div></div>
</div>
It should work always. You can call the class name as .group instead of .clearfix , as it will make the code more semantic. Note that, it is Not necessary to add the dot or even a space in the value of Content between the double quotation "". Also, overflow: auto; might solve the problem but it causes other problems like showing the scroll-bar and is not recommended.
Source: Blog of Lisa Catalano and Chris Coyier
Try this:
overflow: auto;
It worked for my problem..
Use the span tag with display:inline-block css attached to it. You can then use CSS and manipulate it like a div in lots of ways but if you don't include a width or height it expands and retracts based on its content.
Hope that helps.
I added Bootstrap to a project with section tags that I had set to 100% of screen height. It worked well until I made the project responsive, at which point I borrowed part of jennyfofenny's answer so my section background matched background of the content when the screen size changed on smaller screens.
My new section CSS looks like this:
section {
// min-height so it looks good on big screen
// but resizes on a small-screen
min-height: 100%;
min-height: 100vh;
width:100%;
width:100vh;
}
Let's say you've got a section that's a certain color. By using min-height, if the width of the section shrinks because of a smaller-screen, the height of the section will expand, the content will stay within the section, and your background will stay the desired color.
I tried this and it worked
<div style=" position: absolute; direction: ltr;height:auto; min-height:100%"> </div>
You can use CSS Grid Layout. Support is rather wide at the moment: check it on caniuse.
Here is the example on jsfiddle. Also example with tons of text stuff.
HTML code:
<div class="container">
<div class="header">
Header
</div>
<div class="content">
Content
</div>
<div class="footer">
Footer
</div>
</div>
CSS Code:
html, body {
width: 100%;
height: 100%;
margin: 0;
}
.container {
width: 100%;
height: 100%;
display: grid;
grid-template-rows: 100px auto 150px;
grid-template-columns: auto;
}
// style stuff
No need to use a lot of CSS, just use bootstrap, then use:
class="container"
for the div that needs to be filled.
add a float property to the #main_content div - it will then expand to contain its floated contents
Before to do anything check for css rules with:
{ position:absolute }
Remove if exist and don't need them.
In CSS: #clear_div{clear:both;}
After the div tag of the inner div add this new following div
<div id="clear_div"></div>
http://www.w3schools.com/cssref/pr_class_clear.asp : for more information
On parent DIV:
height: 100%;
This work for me every time
Typically I think this can be resolved by forcing a clear:both rule on the last child-element of the #items_list.
You can either use:
#items_list:last-child {clear: both;}
Or, if you're using a dynamic language, add an additional class to the last element generated in whatever loop creates the list itself, so you end up with something in your html like:
<div id="list_item_20" class="last_list_item">
and css
.last_list_item {clear: both; }
Floated elements do not occupy the space inside of the parent element, As the name suggests they float! Thus if a height is explicitly not provided to an element having its child elements floated, then the parent element will appear to shrink & appear to not accepting dimensions of the child element, also if its given overflow:hidden; its children may not appear on screen. There are multiple ways to deal with this problem:
Insert another element below the floated element with clear:both; property, or use clear:both; on :after of the floated element.
Use display:inline-block; or flex-box instead of float.
Added display:inline to the div and it grew auto ( not the scroll stuff ) when height content got bigger then the set div height of 200px
as an alternative way you can also try this that may be usefull in some situations
display:table;
Thw following should work:
.main #main_content {
padding: 5px;
margin: 0px;
overflow: auto;
width: 100%; //for some explorer browsers to trigger hasLayout
}
Source: Stackoverflow.com