Float and space

Question

I would like to position 4 blocks : 2 on left and 2 on right.

I can't change the order of the div and d1, d3 must be on right. At the opposite, d2, d4 must be on left. My first thought was to do this :

html :

<div class="d1"></div>
<div class="d2"></div>
<div class="d3"></div>
<div class="d4"></div>

CSS :

div {
    background-color: red;
    border: solid 1px;
    height: 20px;
}

.d1, .d3 {
    float:left;
    width: 68%;
    height: 50px;
}

.d2, .d4 {
    float: right;
    width: 28%;
}

the fact is that d2 and d4 are separated by a space. I was thinking that block will use all the available space.

How, without changing block order and using only float (no absolute positionning), can I remove this empty space between d2 and d4 ? And additionally, why is there this space ?

here is the fiddle : http://jsfiddle.net/jjmj2a59/

Answer 1

I can't get it quite right, I have 3 different solutions that almost work but ultimately fail to meet all your constraints:

First idea: negative margin-top

Drawback: you need to know the height of .d1 and .d2

div {
    background-color: red;
    border: solid 1px;
    height: 20px;
}

.d1, .d3 {
    float:left;
    width: 68%;
    height: 50px;
}

.d2, .d4 {
    float: right;
    width: 28%;
}

.d4 {
    margin-top:-30px;
}

<div class="d1"></div>
<div class="d2"></div>
<div class="d3"></div>
<div class="d4"></div>

Second idea: Flexbox in 2 rows

This is probably the closest to what you want, the only drawback is that .d2 and .d4 are vertically centered instead of at the top. Also you need to set some style rules for the parent of your div, but I can't imagine that's a problem.
Also this won't work in IE9 and below and may look a bit different in IE10.

.flex-parent {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-flex-flow: row wrap;
    -ms-flex-flow: row wrap;
    flex-flow: row wrap;
}
.flex-parent div {
    background-color: red;
    border: solid 1px;
}
.d1, .d3 {
    width: 68%;
    height: 50px;
    -webkit-align-self:flex-start;
    -ms-flex-item-align:start;
    align-self:flex-start;
}
.d2, .d4 {
    width: 28%;
    height: 20px;
}
.d2 {
    -webkit-align-self:flex-end;
    -ms-flex-item-align:end;
    align-self:flex-end;
}

<div class="flex-parent">
    <div class="d1">d1</div>
    <div class="d2">d2</div>
    <div class="d3">d3</div>
    <div class="d4">d4</div>
</div>

Third idea: flexbox in 2 columns (incomplete)

The general idea here is to use flexbox to do this:

1. reorder the elements in the order .d1 .d3 .d2 .d4
2. display them in a column
3. align .d1 and .d3 to the left and .d2 and .d4 to the right edge of the container.
4. force a wrap between .d3 and .d2 to push .d2 and .d4 into a new column.

I've got 1-3, but I can't get 4 to happen without specifying the height of the container, or a margin that has to be tuned exactly to the height of one of the largest element. Maybe someone else has an idea how to fix that, so here is what I got so far:

.flex-parent {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-flex-flow: column wrap;
    -ms-flex-flow: column wrap;
    flex-flow: column wrap;
    -webkit-align-content: center;
    -ms-flex-line-pack: center;
    align-content: center;
}
.flex-parent div {
    background-color: red;
    border: solid 1px;
}
.d1, .d3 {
    width: 68%;
    height: 50px;
    -webkit-align-self:flex-start;
    -ms-flex-item-align:start;
    align-self:flex-start;
}
.d2, .d4 {
    width: 28%;
    height: 20px;
    -webkit-align-self:flex-end;
    -ms-flex-item-align:end;
    align-self:flex-end;
}
.d1 {
    -webkit-box-ordinal-group:2;
    -webkit-order:1;
    -ms-flex-order:1;
    order:1;
}
.d2 {
    -webkit-box-ordinal-group:4;
    -webkit-order:3;
    -ms-flex-order:3;
    order:3;
}
.d3 {
    -webkit-box-ordinal-group:3;
    -webkit-order:2;
    -ms-flex-order:2;
    order:2;
}
.d4 {
    -webkit-box-ordinal-group:5;
    -webkit-order:4;
    -ms-flex-order:4;
    order:4;
}

<div class="flex-parent">
    <div class="d1">d1</div>
    <div class="d2">d2</div>
    <div class="d3">d3</div>
    <div class="d4">d4</div>
</div>