CSS child div tag not spanning inside parent div tag

Question

I created 1 parent id named "mod1" and 2 child classes named "left" and right". When I call the left and right classes inside the parent mod1 id, they are overflowing from the parent id's height. I don't want to explicitly mention height of parent id "mod1", I simply want it to stretch as per the child classes within. The problem is that the parent id is not actually CONTAINING both it's child classes i.e. none of the child are having background color as #888 and the border seems to appear right above them. This is my html code

<head>
<style>
body
{
    max-width: 600px;
    margin: auto;
}

#mod1
{
    background-color: #888;
    border: 1px solid black;
}
#mod1 .left
{
    float: left;
    width: 75%;
}
#mod1 .right
{
    float: left;
    width: 25%;
}
</style>
</head>
<body>
<div id="mod1">
<div class="left">
Book Accomodation + Deals With The Best In The Business
</div>
<div class="right">
VIEW ON THE WEB
</div>
</div>
</body>

http://pageaffairs.com/notebook/containing-floats – CBroe Mar 22 '15 at 11:57 — CBroe, Mar 22 '15 at 11:57

Terry · Accepted Answer · 2015-03-22T12:12:33.417

The reason why the parent's height appears to collapse is because when you float an element, it is taken out of the document flow and therefore does not contribute to the computation of the parent container's final dimensions. If all the children are floated, then the parent's height will collapse to zero.

The solution is rather simple: use overflow: hidden to clear the float in the parent element. However, if you have overflowing content that you want to show (like a dropdown menu), you will have to employ the clearfix solution.

#mod1
{
    background-color: #888;
    border: 1px solid black;
    overflow: hidden;
    /* overflow: auto; will also work fine */
}

You can see from the snippet below that adding the rule works:

body
{
  max-width: 600px;
  margin: auto;
}

#mod1
{
  background-color: #888;
  border: 1px solid black;
  overflow: hidden;
}
#mod1 .left
{
  float: left;
  width: 75%;
}
#mod1 .right
{
  float: left;
  width: 25%;
}

<div id="mod1">
  <div class="left">
    Book Accomodation + Deals With The Best In The Business
  </div>
  <div class="right">
    VIEW ON THE WEB
  </div>
</div>

@EricCartman Glad that it helped ;) also I forgot to mention that both `overflow: hidden` and `overflow: auto` will work for simple cases. — Terry, Mar 22 '15 at 12:13

daxter1992 · Answer 2 · 2015-03-22T12:03:23.883

0

The CSS property float causes the element to "collapse", which is why the container element looks like it's not containing the left and right elements. I usually make a dummy div below them, inside the container class, and give it the property clear: both;

<div id="mod1">
    <div class="left">
        Book Accomodation + Deals With The Best In The Business
    </div>
    <div class="right">
        VIEW ON THE WEB
    </div>
    <div class="dummy"></div>
</div>

and give it the style:

.dummy {
    clear: both;
}

See other possible solutions: How do you keep parents of floated elements from collapsing?

edited Mar 22 '15 at 12:03

answered Mar 22 '15 at 11:58

daxter1992

468
3
11

Using an extra element just to clear floats is like using spacer gifs. Don't do as there are far better methods. – Rob Mar 22 '15 at 12:09
I would recommend against using dummy elements to achieve desirable layout, because they have no semantic meaning (does not carry content). There are many other better ways to clear a float out there: from using pseudo-elements to the hackish solution of using `overflow` properties. – Terry Mar 22 '15 at 12:16

whaley · Answer 3 · 2015-03-22T12:12:21.153

0

You have to clear your floats when using floats (most of the time).
Use flex instead. Then you don't have to clear floats. It makes things like this easier.

body {
  max-width: 600px;
  margin: auto;
}
#mod1 {
  display: flex; /* Tells the browser you want children to use flex */
  font-family: sans-serif;
  color: white;
}
.left,
.right {
  flex: 1; /* Tells the browser to take "one piece of pie" for the width (or height, depending on flex-direction) */
  padding: 1em;
}
.left {
  background: orange;
}
.right {
  background: darkorange;
}

<div id="mod1">
  <div class="left">
    Book Accomodation + Deals With The Best In The Business
  </div>
  <div class="right">
    VIEW ON THE WEB
  </div>
</div>

edited Mar 22 '15 at 12:12

answered Mar 22 '15 at 12:04

whaley

598
4
12

To be clear, you don't need to clear floats unless you need to. Also, flex can be a great thing to use but it doesn't work in all versions of IE if he needs to support versions less than IE11. So flex is not always an option. – Rob Mar 22 '15 at 12:08
@Rob You're right. I updated my answer. Also, I suspect the asker is still learning, so that's why I suggested it. I'd imagine by the time they start using their skills, floats will be long gone. – whaley Mar 22 '15 at 12:10
I would hope floats never go away. Floats were never intended to be a property for layout but we had to do what we had to do. – Rob Mar 22 '15 at 12:13
Floats are still useful in selected circumstances, such as floating a stylized first character/word of an opening paragraph, images in a body of text and the likes. However, it's implementation is limited (like you can't have a float flush with the bottom of the container, only to the top), but it's behavior has been exploited for multi-column layouts ;) – Terry Mar 22 '15 at 12:15
@Terry Still useful, but I still hope they get replaced one day sooner than later, for those reasons exactly. :D – whaley Mar 22 '15 at 12:22

CSS child div tag not spanning inside parent div tag

3 Answers3