CODEWITHSUNDEEP
htmlcss
Michael
Michael

Reputation: 815

CSS: height of div containing divs

I have a very simple div, containing some left floating divs:

<div id="group1" style="padding: 10px">
    <div style="width: 180px; float: left">...</div>
    <div style="width: 180px; float: left">...</div>
    <div style="width: 180px; float: left">...</div>
    <div style="width: 180px; float: left">...</div>
</div>

Now I have some problems concerning the height of group1. Basically the padding-bottom does not work, as the height of group1 is not dynamic. In the dev tools it shows thats always 21px. depending on the size of the browser window the inner divs need more space. I tried some combinations of height: auto and min-height, but nothing worked.

Do I really have to calculate the height depending on browser window size? There should be something more convenient!

Any help is greatly appreciated! Thanks

Upvotes: 3

Views: 1544

Answers (5)

demonofthemist
demonofthemist

Reputation: 4199

When a element is using property float It doesn't affect the size of parent, it just floats there, even inline element do affect the parent.

So whenever you use such divs it's necessary to clear the floating context.

There are several ways to achieve that:

  • Use div with clear: both; after floating element within parent
  • Add overflow: hidden; to parent element
  • Add float itself to parent, but this might create problem in height of higher level elements.

Upvotes: 2

Manuel
Manuel

Reputation: 454

You can also use:

<div id="group1" style="padding: 10px; width:100%; display:table;">
  <div style="width: 180px; float: left">hello</div>
  <div style="width: 180px; float: left">hello</div>
  <div style="width: 180px; float: left">hello</div>
  <div style="width: 180px; float: left">hello</div>
</div>

Upvotes: 1

Chirag
Chirag

Reputation: 1022

I've changed your code accordingly and added some required attributes please refer following snippet. 

 <div id="group1" style="padding: 10px; border:1px solid; overflow:hidden;">
       <div style="width: 180px; border:1px solid; float: left;">...</div>
       <div style="width: 180px; border:1px solid; float: left;">...</div>
       <div style="width: 180px; border:1px solid; float: left;">...</div>
       <div style="width: 180px; border:1px solid; float: left;">...</div>
    </div>

Upvotes: 0

Autista_z
Autista_z

Reputation: 2541

The problem is floating inner elements. One solution is what @LokeshGupta posted. But another, if you dont want float parent, is to use clear block:

<div id="group1" style="padding: 10px">
    <div style="width: 180px; float: left">...</div>
    <div style="width: 180px; float: left">...</div>
    <div style="width: 180px; float: left">...</div>
    <div style="width: 180px; float: left">...</div>
    <div style="clear: both;"></div>
</div>

Upvotes: 0

LKG
LKG

Reputation: 4202

<div id="group1" style="padding: 10px; width:100%; float:left;">
    <div style="width: 180px; float: left">hello</div>
    <div style="width: 180px; float: left">hello</div>
    <div style="width: 180px; float: left">hello</div>
    <div style="width: 180px; float: left">hello</div>
</div>

Upvotes: 2

Related Questions