CODEWITHSUNDEEP
htmlcss
pathpot
pathpot

Reputation: 41

Set height 100% but css div does not expand

I have experimented with CSS and found one problem. According to my code (http://jsbin.com/daguviluwo/1/edit?html,output), I would like to create two boxes with "float:left" which automatically adjust their heights to be equal (=the maximum height). Therefore, I create their parent(id="content"). I thought that the parent's height should be adjusted according to the maximum height of its children (but it is not!). Then, the children with property "height:100%" (red box) should have the height as the same as this parent and also the same as the child with maximum height (green box). However, it does not work.

Upvotes: 2

Views: 2185

Answers (2)

Sleek Geek
Sleek Geek

Reputation: 4686

Just add display property value of inline-flex to:

  • #content
  • #leftcontent
  • #rightcontent

Also add size property value of height:auto to:

  • #leftcontent
  • #rightcontent

#content {
  background-color: grey;
  height: 500px;
  width: auto;
  display: inline-flex;
}
#leftcontent {
  height: auto;
  background-color: red;
  display: inline-flex;
}
#rightcontent {
  background-color: green;
  height: auto;
  display: inline-flex;
}
<body>
  <div id="content">
    <div id="leftcontent">
      <ul>
        <li>The height of this div is set to 100</li>
        <li>List 2</li>
        <li>List 3</li>
      </ul>
    </div>
    <div id="rightcontent">
      <h2>This is my first header.</h2>
      <p>Content.</p>
      <h2>This is my second header.</h2>
      <p>Content 2.</p>
    </div>
  </div>
</body>

Note: With this approach, you can remove the floats from left/right element CSS

Upvotes: 2

Dimitris Karagiannis
Dimitris Karagiannis

Reputation: 9358

When you use float on an element, that element leaves the normal flow of the content, and its height does not count as far as its parent element is concerned.

Example

If you have a parent element, and an only child element which has float: left; and height: 300px;, then the parent element will act as if it does not have a child at all and its height will be 0px (or more if it has paddings, but we assume it does not). If the child did not have float then the parent would have height: 300px as you'd expect.

There is a trick that 'corrects' this kind of behaviour which makes it so that even if a child element has float its height still counts for its parent.

https://css-tricks.com/snippets/css/clear-fix/

Now, regarding the height:100% of the children, this will only work if the parent has a declared height other than auto which is the height it has if you do not declare one.

Example

If the parent has height:300px and you set the child to have height:100% it will also be 300px then. But if the parent has not a declared height (i.e. it has height: auto) the child will have a height of 0px (or more if it has paddings, but we assume it does not)

Upvotes: 0

Related Questions