0

I am trying to create a responsive div, which has a section and aside. The parent div occupies 25% height. And the child divs has to occupy 80% of the their parent container. But they are not occupying if the height is in %. But it works fine when the height is given in pixels. Can any one tell me where I went wrong. Here is the html

<div class="container">

  <section>
    This is supposed to be a section
  </section>
  <aside>
    This is supposed to be aside

  </aside>

</div>


Here is the CSS

.container{
  width: 100%;
  background: red;
  height: 25%;
}

.container::before,
.container::after{
  content: "";
  display: table;

}

.container::after{
  clear: both;
}

section{
  float: left;
  width: 40%;
  height: 100%;
  display: block;
}

aside{
  float: right;
  width: 40%;
  height: 80%;
}

section, aside{
  background: green;
  border-radius: 6px;
  margin: 5%;
}

Here is my fiddle https://jsfiddle.net/gvpmahesh/Lhpv0k2x/3/

gates
  • 4,465
  • 7
  • 32
  • 60
  • There's no height to be inherited from `html` or `body`. Either give those a specific height (can be percentage) or use viewport units. http://stackoverflow.com/q/8262852/3168107 – Shikkediel Dec 03 '15 at 09:45

3 Answers3

1

You need to apply position: relative; height: 100%; on the parent elements, i.e. html and body.

You also need to apply position: relative; for any elements you want to use % height on.

Fiddle: https://jsfiddle.net/vdy82azk/

EDIT: position: relative; is not necessary on every element. (see somethinghere's comment)

Kyle O
  • 1,348
  • 10
  • 12
  • 2
    Thats not true - you do not need to define position to use percentage based heights, its just that all the parent tags needs to have a height defined, be it in percentage or pixels. (remove positioning from your fiddle changes nothing, for example) – somethinghere Dec 03 '15 at 09:50
  • 1
    @somethinghere is right. The clearfix is not breaking, it's just that the height is explicitly defined, and the content happens to flow out of the container. – Kyle O Dec 03 '15 at 09:52
1

You need to specify height to body and html tags

https://jsfiddle.net/Lhpv0k2x/5/

body,html { height: 100%; }

EDIT

I am not a float fan, but if you need to use it you can make this:

https://jsfiddle.net/Lhpv0k2x/9/

I edit that:

  • .container vertical padding of 5% (to avoid the vertical margin in the elements)
  • section, aside with margin only horizontal of 5%

And that's all

Marcos Pérez Gude
  • 21,869
  • 4
  • 38
  • 69
  • But why the floats are breaking away from the parent container even though we applied clearfix – gates Dec 03 '15 at 09:54
  • That's the space, I can edit the fiddle to show how to fix – Marcos Pérez Gude Dec 03 '15 at 09:54
  • You can remove the div tag with the clearfix. And I don't understand the vertical padding, vertical align in your code. Can you please explain a bit. – gates Dec 03 '15 at 10:06
  • Yes, the clearfix was a test but that's not the solution. With the padding in the container you can separate the elements. If you put a height with 100% and margin of 5% (top and bottom), the total height will be 110% and it's because the box goes out of the container. – Marcos Pérez Gude Dec 03 '15 at 10:47
0

You need to put something like this:

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

            }
.container{
  width: 100%;
  background: red;
  height: 25%;
}

.container::before,
.container::after{
  content: "";
  display: table;

}

.container::after{
  clear: both;
}

section{
  float: left;
  width: 40%;
  height: 80%;
  display: block;
}

aside{
  float: right;
  width: 40%;
  height: 80%;
}

section, aside{
  background: green;
  border-radius: 6px;
  margin:5%;
}

Link:

 https://jsfiddle.net/1utwx2fp/
SilviaDeGM
  • 91
  • 7