I have a page structure similar to this:
<body>
<div id="parent">
<div id="childRightCol">
/*Content*/
</div>
<div id="childLeftCol">
/*Content*/
</div>
</div>
</body>
I would like for the parent div to expand in height when the inner div's height increases.
Edit:
One problem is that if the width of the child content expands past the width of the browser window, my current CSS puts a horizontal scrollbar on the parent div. I would like the scrollbar to be at the page level. Currently my parent div is set to overflow: auto;
Can you please help me with the CSS for this?
add a clear:both. assuming that your columns are floating. Depending on how your height is specified parent you may need an overflow:auto;
<body>
<div id="parent">
<div id="childRightCol">
<div>
<div id="childLeftCol">
<div>
<div id="clear" style="clear:both;"></div>
</div>
</body>
You have to apply the clearfix solution on the parent container. Here is a nice article explaining the fix link
Instead of setting height property, use min-height.
Are you looking for a 2 column CSS layout?
If so, have a look at the instructions, it's pretty straightforward for starting.
Instead of setting height property, use min-height.
Where We’re Starting From
Here’s some boilerplate HTML and CSS. In our example, we have a parent element with two floated child elements.
/* The CSS you're starting with may look similar to this._x000D_
* This doesn't solve our problem yet, but we'll get there shortly._x000D_
*/_x000D_
_x000D_
.containing-div {_x000D_
background-color: #d2b48c;_x000D_
display: block;_x000D_
height: auto;_x000D_
}_x000D_
_x000D_
.floating-div {_x000D_
float: left;_x000D_
width: 50%;_x000D_
}_x000D_
_x000D_
.floating-div ul {_x000D_
display: inline-block;_x000D_
height: auto;_x000D_
}<!-- The HTML you're starting with might look similar to this -->_x000D_
<div class="containing-div">_x000D_
<div class="floating-div">_x000D_
<ul>_x000D_
<li>List Item One</li>_x000D_
<li>List Item Two</li>_x000D_
<li>List Item Three</li>_x000D_
<li>List Item Four</li>_x000D_
</ul>_x000D_
</div>_x000D_
<div class="floating-div">_x000D_
<ul>_x000D_
<li>List Item Five</li>_x000D_
<li>List Item Six</li>_x000D_
<li>List Item Seven</li>_x000D_
<li>List Item Eight</li>_x000D_
</ul>_x000D_
</div>_x000D_
</div>Solution #1: overflow: auto
A solution that works in all modern browsers and in Internet Explorer back to IE8 is to add overflow: auto to the parent element. This also works in IE7, with scrollbars added.
/* Our Modified CSS._x000D_
* This is one way we can solve our problem._x000D_
*/_x000D_
_x000D_
.containing-div {_x000D_
background-color: #d2b48c;_x000D_
display: block;_x000D_
height: auto;_x000D_
overflow: auto;_x000D_
/*This is what we added!*/_x000D_
}_x000D_
_x000D_
.floating-div {_x000D_
float: left;_x000D_
width: 50%;_x000D_
}_x000D_
_x000D_
.floating-div ul {_x000D_
display: inline-block;_x000D_
height: auto;_x000D_
}Solution #2: Float Parent Container
Another solution that works in all modern browsers and back to IE7 is to float the parent container.
This may not always be practical, because floating your parent div may affect other parts of your page layout.
/* Modified CSS #2._x000D_
* Floating parent div._x000D_
*/_x000D_
_x000D_
.containing-div {_x000D_
background-color: #d2b48c;_x000D_
display: block;_x000D_
float: left;_x000D_
/*Added*/_x000D_
height: auto;_x000D_
width: 100%;_x000D_
/*Added*/_x000D_
}_x000D_
_x000D_
.floating-div {_x000D_
float: left;_x000D_
width: 50%;_x000D_
}_x000D_
_x000D_
.floating-div ul {_x000D_
display: inline-block;_x000D_
height: auto;_x000D_
}Method #3: Add Clearing Div Below Floated Elements
/* _x000D_
* CSS to Solution #3._x000D_
*/_x000D_
_x000D_
.containing-div {_x000D_
background-color: #d2b48c;_x000D_
display: block;_x000D_
height: auto;_x000D_
}_x000D_
_x000D_
.floating-div {_x000D_
float: left;_x000D_
width: 50%;_x000D_
}_x000D_
_x000D_
.floating-div ul {_x000D_
display: inline-block;_x000D_
height: auto;_x000D_
}_x000D_
_x000D_
_x000D_
/*Added*/_x000D_
_x000D_
.clear {_x000D_
clear: both;_x000D_
}<!-- Solution 3, Add a clearing div to bottom of parent element -->_x000D_
<div class="containing-div">_x000D_
<div class="floating-div">_x000D_
<ul>_x000D_
<li>List Item One</li>_x000D_
<li>List Item Two</li>_x000D_
<li>List Item Three</li>_x000D_
<li>List Item Four</li>_x000D_
</ul>_x000D_
</div>_x000D_
<div class="floating-div">_x000D_
<ul>_x000D_
<li>List Item Five</li>_x000D_
<li>List Item Six</li>_x000D_
<li>List Item Seven</li>_x000D_
<li>List Item Eight</li>_x000D_
</ul>_x000D_
</div>_x000D_
<div class="clear"></div>_x000D_
</div>Method #4: Add Clearing Div To The Parent Element This solution is pretty bulletproof for older browsers and newer browsers alike.
/* _x000D_
* CSS to Solution #4._x000D_
*/_x000D_
_x000D_
.containing-div {_x000D_
background-color: #d2b48c;_x000D_
display: block;_x000D_
height: auto;_x000D_
}_x000D_
_x000D_
.floating-div {_x000D_
float: left;_x000D_
width: 50%;_x000D_
}_x000D_
_x000D_
.floating-div ul {_x000D_
display: inline-block;_x000D_
height: auto;_x000D_
}_x000D_
_x000D_
_x000D_
/*Added*/_x000D_
_x000D_
.clearfix {_x000D_
clear: both;_x000D_
}_x000D_
_x000D_
.clearfix:after {_x000D_
clear: both;_x000D_
content: "";_x000D_
display: table;_x000D_
}<!-- Solution 4, make parent element self-clearing -->_x000D_
<div class="containing-div clearfix">_x000D_
<div class="floating-div">_x000D_
<ul>_x000D_
<li>List Item One</li>_x000D_
<li>List Item Two</li>_x000D_
<li>List Item Three</li>_x000D_
<li>List Item Four</li>_x000D_
</ul>_x000D_
</div>_x000D_
<div class="floating-div">_x000D_
<ul>_x000D_
<li>List Item Five</li>_x000D_
<li>List Item Six</li>_x000D_
<li>List Item Seven</li>_x000D_
<li>List Item Eight</li>_x000D_
</ul>_x000D_
</div>_x000D_
</div>from https://www.lockedownseo.com/parent-div-100-height-child-floated-elements/
I use this CSS to parent and it works:
min-height:350px;
background:url(../images/inner/details_middle.gif) repeat-y 0 0 ;
padding:5px 10px;
text-align:right;
overflow: hidden;
position: relative;
width: 100%;
#childRightCol_x000D_
{_x000D_
float:right;_x000D_
}_x000D_
#childLeftCol_x000D_
{_x000D_
float:left;_x000D_
}_x000D_
#parent_x000D_
{_x000D_
display:inline;_x000D_
}This is functioning as described by the spec - several answers here are valid, and consistent with the following:
If it has block-level children, the height is the distance between the top border-edge of the topmost block-level child box that doesn't have margins collapsed through it and the bottom border-edge of the bottommost block-level child box that doesn't have margins collapsed through it. However, if the element has a nonzero top padding and/or top border, or is the root element, then the content starts at the top margin edge of the topmost child. (The first case expresses the fact that the top and bottom margins of the element collapse with those of the topmost and bottommost children, while in the second case the presence of the padding/border prevents the top margins from collapsing.) Similarly, if the element has a nonzero bottom padding and/or bottom border, then the content ends at the bottom margin edge of the bottommost child.
from here: https://www.w3.org/TR/css3-box/#blockwidth
#parent{_x000D_
background-color:green;_x000D_
height:auto;_x000D_
width:300px;_x000D_
overflow:hidden;_x000D_
}_x000D_
_x000D_
#childRightCol{_x000D_
color:gray;_x000D_
background-color:yellow;_x000D_
margin:10px;_x000D_
padding:10px;_x000D_
}<div id="parent">_x000D_
<div id="childRightCol">_x000D_
<p>_x000D_
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque vulputate sit amet neque ac consequat._x000D_
</p>_x000D_
</div>_x000D_
</div>you are manage by using overflow:hidden; property in css
Where We’re Starting From
Here’s some boilerplate HTML and CSS. In our example, we have a parent element with two floated child elements.
/* The CSS you're starting with may look similar to this._x000D_
* This doesn't solve our problem yet, but we'll get there shortly._x000D_
*/_x000D_
_x000D_
.containing-div {_x000D_
background-color: #d2b48c;_x000D_
display: block;_x000D_
height: auto;_x000D_
}_x000D_
_x000D_
.floating-div {_x000D_
float: left;_x000D_
width: 50%;_x000D_
}_x000D_
_x000D_
.floating-div ul {_x000D_
display: inline-block;_x000D_
height: auto;_x000D_
}<!-- The HTML you're starting with might look similar to this -->_x000D_
<div class="containing-div">_x000D_
<div class="floating-div">_x000D_
<ul>_x000D_
<li>List Item One</li>_x000D_
<li>List Item Two</li>_x000D_
<li>List Item Three</li>_x000D_
<li>List Item Four</li>_x000D_
</ul>_x000D_
</div>_x000D_
<div class="floating-div">_x000D_
<ul>_x000D_
<li>List Item Five</li>_x000D_
<li>List Item Six</li>_x000D_
<li>List Item Seven</li>_x000D_
<li>List Item Eight</li>_x000D_
</ul>_x000D_
</div>_x000D_
</div>Solution #1: overflow: auto
A solution that works in all modern browsers and in Internet Explorer back to IE8 is to add overflow: auto to the parent element. This also works in IE7, with scrollbars added.
/* Our Modified CSS._x000D_
* This is one way we can solve our problem._x000D_
*/_x000D_
_x000D_
.containing-div {_x000D_
background-color: #d2b48c;_x000D_
display: block;_x000D_
height: auto;_x000D_
overflow: auto;_x000D_
/*This is what we added!*/_x000D_
}_x000D_
_x000D_
.floating-div {_x000D_
float: left;_x000D_
width: 50%;_x000D_
}_x000D_
_x000D_
.floating-div ul {_x000D_
display: inline-block;_x000D_
height: auto;_x000D_
}Solution #2: Float Parent Container
Another solution that works in all modern browsers and back to IE7 is to float the parent container.
This may not always be practical, because floating your parent div may affect other parts of your page layout.
/* Modified CSS #2._x000D_
* Floating parent div._x000D_
*/_x000D_
_x000D_
.containing-div {_x000D_
background-color: #d2b48c;_x000D_
display: block;_x000D_
float: left;_x000D_
/*Added*/_x000D_
height: auto;_x000D_
width: 100%;_x000D_
/*Added*/_x000D_
}_x000D_
_x000D_
.floating-div {_x000D_
float: left;_x000D_
width: 50%;_x000D_
}_x000D_
_x000D_
.floating-div ul {_x000D_
display: inline-block;_x000D_
height: auto;_x000D_
}Method #3: Add Clearing Div Below Floated Elements
/* _x000D_
* CSS to Solution #3._x000D_
*/_x000D_
_x000D_
.containing-div {_x000D_
background-color: #d2b48c;_x000D_
display: block;_x000D_
height: auto;_x000D_
}_x000D_
_x000D_
.floating-div {_x000D_
float: left;_x000D_
width: 50%;_x000D_
}_x000D_
_x000D_
.floating-div ul {_x000D_
display: inline-block;_x000D_
height: auto;_x000D_
}_x000D_
_x000D_
_x000D_
/*Added*/_x000D_
_x000D_
.clear {_x000D_
clear: both;_x000D_
}<!-- Solution 3, Add a clearing div to bottom of parent element -->_x000D_
<div class="containing-div">_x000D_
<div class="floating-div">_x000D_
<ul>_x000D_
<li>List Item One</li>_x000D_
<li>List Item Two</li>_x000D_
<li>List Item Three</li>_x000D_
<li>List Item Four</li>_x000D_
</ul>_x000D_
</div>_x000D_
<div class="floating-div">_x000D_
<ul>_x000D_
<li>List Item Five</li>_x000D_
<li>List Item Six</li>_x000D_
<li>List Item Seven</li>_x000D_
<li>List Item Eight</li>_x000D_
</ul>_x000D_
</div>_x000D_
<div class="clear"></div>_x000D_
</div>Method #4: Add Clearing Div To The Parent Element This solution is pretty bulletproof for older browsers and newer browsers alike.
/* _x000D_
* CSS to Solution #4._x000D_
*/_x000D_
_x000D_
.containing-div {_x000D_
background-color: #d2b48c;_x000D_
display: block;_x000D_
height: auto;_x000D_
}_x000D_
_x000D_
.floating-div {_x000D_
float: left;_x000D_
width: 50%;_x000D_
}_x000D_
_x000D_
.floating-div ul {_x000D_
display: inline-block;_x000D_
height: auto;_x000D_
}_x000D_
_x000D_
_x000D_
/*Added*/_x000D_
_x000D_
.clearfix {_x000D_
clear: both;_x000D_
}_x000D_
_x000D_
.clearfix:after {_x000D_
clear: both;_x000D_
content: "";_x000D_
display: table;_x000D_
}<!-- Solution 4, make parent element self-clearing -->_x000D_
<div class="containing-div clearfix">_x000D_
<div class="floating-div">_x000D_
<ul>_x000D_
<li>List Item One</li>_x000D_
<li>List Item Two</li>_x000D_
<li>List Item Three</li>_x000D_
<li>List Item Four</li>_x000D_
</ul>_x000D_
</div>_x000D_
<div class="floating-div">_x000D_
<ul>_x000D_
<li>List Item Five</li>_x000D_
<li>List Item Six</li>_x000D_
<li>List Item Seven</li>_x000D_
<li>List Item Eight</li>_x000D_
</ul>_x000D_
</div>_x000D_
</div>from https://www.lockedownseo.com/parent-div-100-height-child-floated-elements/
Are you looking for a 2 column CSS layout?
If so, have a look at the instructions, it's pretty straightforward for starting.
If your content inside #childRightCol and #childRightCol are floated left or right, just add this into css:
#childRightCol:before { display: table; content: " "; }
#childRightCol:after { display: table; content: " "; clear: both; }
#childLeftCol:before { display: table; content: " "; }
#childLeftCol:after { display: table; content: " "; clear: both; }
Using something like self-clearing div is perfect for a situation like this. Then you'll just use a class on the parent... like:
<div id="parent" class="clearfix">
If your content inside #childRightCol and #childRightCol are floated left or right, just add this into css:
#childRightCol:before { display: table; content: " "; }
#childRightCol:after { display: table; content: " "; clear: both; }
#childLeftCol:before { display: table; content: " "; }
#childLeftCol:after { display: table; content: " "; clear: both; }
Does this do what you want?
.childRightCol, .childLeftCol
{
display: inline-block;
width: 50%;
margin: 0;
padding: 0;
vertical-align: top;
}
I use this CSS to parent and it works:
min-height:350px;
background:url(../images/inner/details_middle.gif) repeat-y 0 0 ;
padding:5px 10px;
text-align:right;
overflow: hidden;
position: relative;
width: 100%;
Are you looking for a 2 column CSS layout?
If so, have a look at the instructions, it's pretty straightforward for starting.
Using something like self-clearing div is perfect for a situation like this. Then you'll just use a class on the parent... like:
<div id="parent" class="clearfix">
You have to apply the clearfix solution on the parent container. Here is a nice article explaining the fix link
Try to give max-contentfor parent's height.
.parent{
height: max-content;
}
This is functioning as described by the spec - several answers here are valid, and consistent with the following:
If it has block-level children, the height is the distance between the top border-edge of the topmost block-level child box that doesn't have margins collapsed through it and the bottom border-edge of the bottommost block-level child box that doesn't have margins collapsed through it. However, if the element has a nonzero top padding and/or top border, or is the root element, then the content starts at the top margin edge of the topmost child. (The first case expresses the fact that the top and bottom margins of the element collapse with those of the topmost and bottommost children, while in the second case the presence of the padding/border prevents the top margins from collapsing.) Similarly, if the element has a nonzero bottom padding and/or bottom border, then the content ends at the bottom margin edge of the bottommost child.
from here: https://www.w3.org/TR/css3-box/#blockwidth
Add
clear:both;
To the css of the parent div, or add a div at the bottom of the parent div that does clear:both;
That is the correct answer, because overflow:auto; may work for simple web layouts, but will mess with elements that start using things like negative margin, etc
Are you looking for a 2 column CSS layout?
If so, have a look at the instructions, it's pretty straightforward for starting.
Try to give max-contentfor parent's height.
.parent{
height: max-content;
}
For those who can not figure out this in instructions from this answer there:
Try to set padding value more then 0, if child divs have margin-top or margin-bottom you can replace it with padding
For example if you have
#childRightCol
{
margin-top: 30px;
}
#childLeftCol
{
margin-bottom: 20px;
}
it'll be better to replace it with:
#parent
{
padding: 30px 0px 20px 0px;
}
As Jens said in comment
An alternative answer is How to make div not larger than its contents?… and it proposes to set display:inline-block. Which worked great for me. – Jens Jun 2 at 5:41
This works far better for me in all browsers.
Add
clear:both;
To the css of the parent div, or add a div at the bottom of the parent div that does clear:both;
That is the correct answer, because overflow:auto; may work for simple web layouts, but will mess with elements that start using things like negative margin, etc
add a clear:both. assuming that your columns are floating. Depending on how your height is specified parent you may need an overflow:auto;
<body>
<div id="parent">
<div id="childRightCol">
<div>
<div id="childLeftCol">
<div>
<div id="clear" style="clear:both;"></div>
</div>
</body>
As Jens said in comment
An alternative answer is How to make div not larger than its contents?… and it proposes to set display:inline-block. Which worked great for me. – Jens Jun 2 at 5:41
This works far better for me in all browsers.
Using something like self-clearing div is perfect for a situation like this. Then you'll just use a class on the parent... like:
<div id="parent" class="clearfix">
#childRightCol_x000D_
{_x000D_
float:right;_x000D_
}_x000D_
#childLeftCol_x000D_
{_x000D_
float:left;_x000D_
}_x000D_
#parent_x000D_
{_x000D_
display:inline;_x000D_
}Does this do what you want?
.childRightCol, .childLeftCol
{
display: inline-block;
width: 50%;
margin: 0;
padding: 0;
vertical-align: top;
}
Below code worked for me.
.parent{
overflow: auto;
}
<div class="parent">
<div class="child1">
</div>
<div class="child2">
</div>
<div id="clear" style="clear:both;"></div>
</div>
#parent{_x000D_
background-color:green;_x000D_
height:auto;_x000D_
width:300px;_x000D_
overflow:hidden;_x000D_
}_x000D_
_x000D_
#childRightCol{_x000D_
color:gray;_x000D_
background-color:yellow;_x000D_
margin:10px;_x000D_
padding:10px;_x000D_
}<div id="parent">_x000D_
<div id="childRightCol">_x000D_
<p>_x000D_
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque vulputate sit amet neque ac consequat._x000D_
</p>_x000D_
</div>_x000D_
</div>you are manage by using overflow:hidden; property in css
I made a parent div expand around content of a child div by having the child div as a single column that does not have any positioning attribute such as absolute specified.
Example:
#wrap {width:400px;padding:10px 200px 10px 200px;position:relative;margin:0px auto;}
#maincolumn {width:400px;}
Based on maincolumn div being the deepest child div of #wrap this defines the depth of the #wrap div and the 200px padding on either side creates two big blank columns for you to place absolutely positioned divs in as you please. You could even change the padding top and bottom to place header divs and footer divs using position:absolute.
Below code worked for me.
.parent{
overflow: auto;
}
<div class="parent">
<div class="child1">
</div>
<div class="child2">
</div>
<div id="clear" style="clear:both;"></div>
</div>
I made a parent div expand around content of a child div by having the child div as a single column that does not have any positioning attribute such as absolute specified.
Example:
#wrap {width:400px;padding:10px 200px 10px 200px;position:relative;margin:0px auto;}
#maincolumn {width:400px;}
Based on maincolumn div being the deepest child div of #wrap this defines the depth of the #wrap div and the 200px padding on either side creates two big blank columns for you to place absolutely positioned divs in as you please. You could even change the padding top and bottom to place header divs and footer divs using position:absolute.
Using something like self-clearing div is perfect for a situation like this. Then you'll just use a class on the parent... like:
<div id="parent" class="clearfix">
add a clear:both. assuming that your columns are floating. Depending on how your height is specified parent you may need an overflow:auto;
<body>
<div id="parent">
<div id="childRightCol">
<div>
<div id="childLeftCol">
<div>
<div id="clear" style="clear:both;"></div>
</div>
</body>
For those who can not figure out this in instructions from this answer there:
Try to set padding value more then 0, if child divs have margin-top or margin-bottom you can replace it with padding
For example if you have
#childRightCol
{
margin-top: 30px;
}
#childLeftCol
{
margin-bottom: 20px;
}
it'll be better to replace it with:
#parent
{
padding: 30px 0px 20px 0px;
}
add a clear:both. assuming that your columns are floating. Depending on how your height is specified parent you may need an overflow:auto;
<body>
<div id="parent">
<div id="childRightCol">
<div>
<div id="childLeftCol">
<div>
<div id="clear" style="clear:both;"></div>
</div>
</body>
Source: Stackoverflow.com