Categories
css css-float html twitter-bootstrap twitter-bootstrap-3

Responsive layout & column float issue

I’m trying to achieve this layout with a series of tiled divs in a single row using Bootstrap 3.2.0, for screens > 768px wide. The div heights are either single or double, which in this sample I’ve set to 50px and 100px and div widths are controlled by class col-sm-x:

enter image description here

My best attempt so far uses the below markup & css:

Css

.red{ background-color: red; }
.blue{ background-color: blue; }
.green{ background-color: green; }
.yellow{ background-color: yellow; }
.purple{ background-color: purple; }
.home-height-single{ min-height: 50px; }
.home-height-double{ min-height: 100px; }
@media (min-width: 768px) {
.b-col {
float: right;
}
}

Markup:

<div class="row">
<div class="col-sm-6 home-height-double green">
<p>1</p>
</div>
<div class="col-sm-4 home-height-single blue b-col">
<p>3</p>
</div>
<div class="col-sm-2 home-height-single purple b-col">
<p>2</p>
</div>
<div class="col-sm-2 home-height-single green b-col">
<p>7</p>
</div>
<div class="col-sm-4 home-height-double yellow b-col">
<p>6</p>
</div>
<div class="col-sm-2 home-height-single blue">
<p>4</p>
</div>
<div class="col-sm-4 home-height-single red">
<p>5</p>
</div>
<div class="col-sm-2 home-height-single red b-col">
<p>8</p>
</div>
</div>

This currently produces the below, where div 8 isn’t filling the gap:

enter image description here

JSFiddle – Showing the issue

I’m aware that I could create 2 columns and wrap the divs in 2 parent divs, but I want to avoid this. The reason being that on a mobile view, I want to place divs 2 & 4 side by side, rather than have them stacked, which I don’t believe I can do if the divs are wrapped in to 2 columns.

For example, I’m planning to setup my mobile view to look something like this once I’ve got past this issue:

enter image description here

I managed to fix the layout issue with the following edit to my CSS media query:

@media (min-width: 768px) {
.row {
position: relative
}
.b-col {
float: right;
}
.b-col:last-of-type {
position: absolute;
bottom: 0;
right: 0
}
}

Working JSFiddle