Placing divs inside a div // flexible div width used // margin doesn't work

Question

I'm trying to place some divs inside one div, where last div has the overflow parameter used to make it somehow flexible to take the remaining space. jsfiddle to show en example.

HTML Code:

<div class="container">
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
    <div class="box4"></div>
    <div class="box5"></div>
</div>

CSS code:

.container {
    width: 400px;
    height: auto;
    border: 1px solid red;
    margin: 0 auto;
}

.box1 {
    width: 50px;
    height: 100px;
    border: 3px solid;
    border-color: rgba(23, 23, 23, 0.5);
    background-color: rgb(227, 227, 227);
    margin: 4px 4px 4px 4px;
    padding: 0px;
    float: left;
}

.box2 {
    width: 100px;
    height: 50px;
    border: 3px solid;
    border-color: rgba(23, 23, 23, 0.5);
    background-color: rgb(191, 239, 255);
    margin: 4px 4px 4px 4px;
    padding: 0px;
    float: left;
}

.box3 {
    width: 70px;
    height: 30px;
    border: 3px solid;
    border-color: rgba(23, 23, 23, 0.5);
    background-color: rgb(238, 212, 232);
    margin: 4px 4px 4px 4px;
    padding: 0px;
    float: left;
}

.box4 {
    width: 30px;
    height: 100px;
    border: 3px solid;
    border-color: rgba(23, 23, 23, 0.5);
    background-color: rgb(235, 252 ,212);
    margin: 4px 4px 4px 4px;
    padding: 0px;
    float: left;
}

.box5 {
    height: 70px;
    border: 3px solid;
    border-color: rgba(23, 23, 23, 0.5);
    background-color: rgb(255, 173, 187);
    margin: 4px 4px 4px 4px;
    padding: 0px;
    overflow: hidden;
}

Now I have two questions:

Why the container div doesn't (visually) contain all divs but only the last one (box5) and how to fix it?
Why the last div (with overflow) does not use margin parameter? You can see in the fiddle that the margin on the left is only 4px instead 8px in total.

Floats are not considered by surrounding containers regarding width and height. A container that contains a million floating `div` each 10000px x 10000px still has width zero and height zero. You need to add a clearfix. E.g. http://www.webtoolkit.info/css_clearfix.html — connexo, Sep 07 '15 at 11:59

score 1 · Answer 1 · answered Sep 07 '15 at 11:56

1

add to .container overflow:hidden

.container { width: 400px; height: auto; border: 1px solid red; margin: 0 auto; overflow:hidden }

answered Sep 07 '15 at 11:56

Paul Booblick

363
1
7

So which way is better - overflow:hidden; or clear:both; ? :) – DonAndress Sep 07 '15 at 12:12
1

[Best Clearfix](http://stackoverflow.com/questions/211383/which-method-of-clearfix-is-best) – Paulie_D Sep 07 '15 at 12:18
Having the container overflow problem sloved, does anyone have any thoughts regarding the margin issue? Please refer to the fiddle from my original question. All inside divs should have 4px margin, which gives 8px in total between divs (left and right). But between green and red-ish div there is only 4px margin, which means that this parameter is not applied to one of that divs (most likely the red one, box5). – DonAndress Sep 07 '15 at 13:11

score 0 · Answer 2 · answered Sep 07 '15 at 13:31

0

add this to your styleshit:

.container div{
 margin-right:4px;   
 margin-left:0 !important;    
}
.container div:nth-of-type(1){
 margin-left:4px !important; 
}

answered Sep 07 '15 at 13:31

Paul Booblick

363
1
7

Maybe I should shed some more light on the project itself. The idea is to create a webpage which would look more or less like Windows Phone - multiple rectangles and squares. But let's say that I place it in lines. In the first line I may have only 3 rectangles with content and the rest of the space should be filled with "flexible" div. In the second line I will have one rectangle floating left, 3 rectangles floating right and then the space left between rectangle 1 and 2 should be filled with "flexible" div. – DonAndress Sep 07 '15 at 13:42
For that I would need some kind of universal kind of div that would work regardless the position (including margin). I know how to achieve the "flexibility" but I'm having trouble with the margin of the "flexible" div. Will your code be universal enough to fit regardless of the position of the div? – DonAndress Sep 07 '15 at 13:42

score 0 · Accepted Answer · answered Sep 07 '15 at 19:38

Actually, depending on what level of browser support you need, this is simple using flexbox and you don't have to clear any floats...because their aren't any.

* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
.container {
  width: 80%;
  height: auto;
  border: 1px solid red;
  margin: 1em auto;
  overflow: auto;
  display: flex;
}
.narrow {
  width: 60%;
}
[class*="box"] {
  margin: 4px;
  padding: 0;
  border: 3px solid;
}
.box1 {
  width: 50px;
  height: 100px;
  border-color: rgba(23, 23, 23, 0.5);
  background-color: rgb(227, 227, 227);
}
.box2 {
  width: 100px;
  height: 50px;
  border-color: rgba(23, 23, 23, 0.5);
  background-color: rgb(191, 239, 255);
}
.box3 {
  width: 70px;
  height: 30px;
  border-color: rgba(23, 23, 23, 0.5);
  background-color: rgb(238, 212, 232);
}
.box4 {
  width: 30px;
  height: 100px;
  border-color: rgba(23, 23, 23, 0.5);
  background-color: rgb(235, 252, 212);
}
.box5 {
  height: 70px;
  border-color: rgba(23, 23, 23, 0.5);
  background-color: rgb(255, 173, 187);
  flex: 1;
}

<div class="container">
  <div class="box1"></div>
  <div class="box2"></div>
  <div class="box3"></div>
  <div class="box4"></div>
  <div class="box5"></div>
</div>

<div class="container narrow">
  <div class="box1"></div>
  <div class="box2"></div>
  <div class="box3"></div>
  <div class="box4"></div>
  <div class="box5"></div>
</div>

Placing divs inside a div // flexible div width used // margin doesn't work

3 Answers3