CODEWITHSUNDEEP
cssresponsive-design
user4630
user4630

Reputation: 633

Last floated box adding space?

I have a 3 column grid with 2 rows, where the second box on the first row is a double col, a featured section essentially.

However, the final box is adding additional space to itself, each single column box has a right margin apart from the final box, but as you can see from this quick fiddle there is additional space at the bottom right...

 .blocks > div{
  display: block;
  float: left;
  overflow: hidden;
  position: relative;
  color: white;
}

.block{
width: 31.33%; 
height: 25%;   

 }

.block.one{
margin-bottom: 9px;
    margin-right: 9px;

    background-color: green;
}
.block.two.feature{
    width: 66.2%;
margin-bottom: 9px;
    background-color: red;
}
.block.three{
background-color: blue;
margin-right: 9px;
}
.block.four{
background-color: purple;

 margin-right: 9px;
}
.block.five{
    margin-right:0; 
background-color: pink;
}

If i remove the margin, and just divide the boxes by 3 they sit flush in there, as soon as i add the margin it seems to effect the final box.

I don’t have a clue why and doesn’t make any sense

Upvotes: 0

Views: 31

Answers (1)

cantera
cantera

Reputation: 25005

Since you're using the box-sizing property to help control the block widths, it is better to use padding rather than margin for the gutters. As explained here, box-sizing only incorporates the padding into the element width (not the margin).

Then, since you need the blocks to have a background color, the best way to handle this is to wrap each block in a container and apply padding to the containers. I realize that having those extra divs isn't ideal, but this really is the proper way and in a real layout you'll almost always have something inside there anyway. This also helps separate layout styles from module styles, as taught here.

To prevent the first and last blocks in each "row" from having space on the outside, we override the left/right padding using alpha and omega classes. This technique is pretty common; check out the source code for popular CSS grid frameworks like Bootstrap and Foundation.

Here's the most relevant code from the fiddle. Happy to help if anything isn't clear.

http://jsfiddle.net/DMKdx/10/

.blocks{
    background-color: grey;
    width:80%;
    height:670px;
}

.block{
    width: 33.33333333333%;
    height: 25%;
    float: left;
    color: white;
    padding: 0 4.5px;
    margin-bottom: 9px;
}

.block.alpha {
    padding-left: 0;
}

.block.omega {
    padding-right: 0;
}

.block.feature {
    width: 66.6666666666667%;
}

Upvotes: 1

Related Questions