Confusion with height:auto

Question

In the following scenario I do not understand why the height of the elements wrapper and content are not set correctly even though they are set to height: auto, meaning that the 2 divs with the class wrap are not displayed inside the wrapper and content divs.

I recreated the problem in this JSfiddle:

http://jsfiddle.net/202oy3k8/

The As you can see the two orange divs are not displayed inside the wrapper divs, even though the wrapper height is set to auto. What is causing this problem and how can I fix it?

HTML CODE:

<div id="wrapper">
    <div id="content">
        <div id="top">

        </div>
        <div class="dash"></div>
        <p id="header">Header</p>

        <div class="wrap">
        </div>
        <div class="wrap">
        </div>
    </div>
</div

CSS CODE:

html, body {
    width: 100%;
    height: 100%;
    padding: 0;
    margin: 0;
}

#wrapper {
    background-color: black;
    margin-top: 2%;
    width: 100%;
    height: auto;
}

#content {
    background-color: green;
    width: 1224px;
    height: auto;
    margin: auto;
    text-align: center;    
}

#top {
    background-color: pink;
    height: 400px;
    width: 60%;
    margin: auto;
}

.dash {
    width: 80%;
    margin: auto;
    margin-bottom: 1%;
    height: 2px;
    background-color: black;
}

p#header {
    margin: 0;
    text-align: center;
}

.wrap {
    background-color: orange;
    margin: 1%;
    float:left;
    width: 48%;
    height: 400px;
}

Ah, the magic of `float` and `clearfix`! You might be interested in reading this other question: http://stackoverflow.com/questions/8554043/what-is-clearfix — Boldewyn, Feb 23 '15 at 13:55
you don't need to set the height to auto that's the default value .... as @Boldewyn you just need to learn how to work with floats and clear. — DaniP, Feb 23 '15 at 13:56

emmanuel · Accepted Answer · 2015-02-23T14:20:52.320

You have to add a clear property to clear left float you have applied to .wrap divs.

What are float and clear for?

If you look in a typical magazine you’ll see images illustrating the articles, with the text flowing around them. The float property in CSS was created to allow this style of layout on web pages. Floating an image—or any other element for that matter—pushes it to one side and lets the text flow on the other side. Clearing a floated element means pushing it down, if necessary, to prevent it from appearing next to the float. Although floating was intended for use with any elements, designers most commmonly use it to achieve multi-column layouts without having to abuse table markup.

html,
body {
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
}
#wrapper {
  background-color: black;
  margin-top: 2%;
  width: 100%;
  height: auto;
}
#content {
  background-color: green;
  width: 400px;
  height: auto;
  margin: auto;
  text-align: center;
}
#top {
  background-color: pink;
  height: 400px;
  width: 60%;
  margin: auto;
}
.dash {
  width: 80%;
  margin: auto;
  margin-bottom: 1%;
  height: 2px;
  background-color: black;
}
p#header {
  margin: 0;
  text-align: center;
}
.wrap {
  background-color: orange;
  margin: 1%;
  float: left;
  width: 48%;
  height: 400px;
}
.clear {
  clear: left;
}

<div id="wrapper">
  <div id="content">
    <div id="top"></div>
    <div class="dash"></div>
    <p id="header">Header</p>
    <div class="wrap"></div>
    <div class="wrap"></div>
    <div class="clear"></div>
  </div>
  </div

Reference: w3.org - Floats and clearing - CSS-Tricks - What is "Float"?

Confusion with height:auto

HTML CODE:

CSS CODE:

1 Answers1