CODEWITHSUNDEEP
csshtml
Kuba Żukowski
Kuba Żukowski

Reputation: 663

DIVs, height and float

I have float red divs on blue div like on picture enter image description here

<div class="blue">
  <div style="height: 40px; float: left"></div>
  <div style="height: 40px; float: left"></div>
  <div style="height: 40px; float: left"></div>

  <div style="height: 40px; float: left"></div>
  <div style="height: 40px; float: left"></div>
  <div style="height: 40px; float: left"></div>
</div>

I want to do, so blue div have height on red DIVs. When I remove float it's OK.

Upvotes: 6

Views: 140

Answers (5)

MikeStack
MikeStack

Reputation: 29

Another option without compatibility in all browsers options but without the need of float:left

.blue{
    background-color:blue;
    overflow:hidden;
    width: 140px;
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
}

.blue div{
    background-color:red;
    margin: 2.5px 0 2.5px 0;
    width:40px;
}
<div class="blue">
  <div style="height: 40px;"></div>
  <div style="height: 40px;"></div>
  <div style="height: 40px;"></div>

  <div style="height: 40px;"></div>
  <div style="height: 40px;"></div>
  <div style="height: 40px;"></div>
</div>

Upvotes: 0

fje
fje

Reputation: 845

If you need something clean and more dynamic, try this:

<div class="blue">
<div>
    <div></div>
    <div></div>
    <div></div>
</div>
<div>
    <div></div>
    <div></div>
    <div></div>
</div>

And this:

.blue {background-color: blue;text-align: center;display: inline-block;padding: 5px;}
.blue > div > div {background-color: red; width:100px; height: 50px; margin: 10px;display: inline-block;}

Example on jsfiddle

Upvotes: 0

Pevara
Pevara

Reputation: 14310

It is a very common problem known as the 'clearfix' problem. More info can be found (for example) here: Div rendering incorrectly in Firefox

In short, you should add a class .clearfix to you parent (blue) div that looks something like this:

.clearfix {
  *zoom: 1;
}
.clearfix:before,
.clearfix:after {
    display: table;
    content: "";
    line-height: 0;
  }
&:after {
    clear: both;
}

This one is 'borrowed' from Twitter Bootsrap, bu there are many alternatives out there. For why and how it works, I suggest googling 'clearfix'.

Note that there exist other 'fixes' like working with inline blocks, adding a overflow: hidden or even displaying as table-cell. Though they might work in some situation, they almost all have other side-effects, or are not fully cross browser, so they should be used with care.

Upvotes: 0

Chris Bier
Chris Bier

Reputation: 14447

Simply float the blue div:

.blue{
   float: left;
}

It will then expand to take on the height of its children.

If floating is not an option, I would set display to inline-block to make it behave the same way as a floated element.

.blue{
   display: inline-block;
}

Reference: https://developer.mozilla.org/en-US/docs/CSS/display

Upvotes: 0

Peter Rasmussen
Peter Rasmussen

Reputation: 16922

You need to add display:table-cell; or overflow:hidden; to your blue div. This will give the parent the height of it's children.

Demo

like this:

.blue{
   overflow:hidden;
   //or
   //display:table-cell;
}

a sidenote - your divs need a width when they are floating.

You also have the option to make your div with class blue float. But this might cause some unwanted behavior in your document (if the div is not supposed to float).

Upvotes: 3

Related Questions