CODEWITHSUNDEEP
htmlcss
DonAndress
DonAndress

Reputation: 23

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

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:

  1. Why the container div doesn't (visually) contain all divs but only the last one (box5) and how to fix it?
  2. 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.

Upvotes: 0

Views: 70

Answers (3)

Paulie_D
Paulie_D

Reputation: 115299

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>

Upvotes: 0

Paul Booblick
Paul Booblick

Reputation: 363

add this to your styleshit:

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

Upvotes: 0

Paul Booblick
Paul Booblick

Reputation: 363

add to .container overflow:hidden

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

Upvotes: 1

Related Questions