Issue with fluid, responsive layout and floated elements - html

Question

I'm designing a basic, two-column fluid responsive layout that linearizes for mobile-- as depicted in my attached diagram-- using floated elements; and I'm having an issue with certain elements dropping, as can be viewed in the fiddle I've set up here. For some reason, "block 7" aligns with the top of "block 6" instead of flowing below "block 3" as desired.
I have two questions with respect to this layout: (1) how can I get the blocks to align as intended; and (2) is it possible, say using jQuery, to re-arrange the order of blocks for mobile-- for instance, at a certain breakpoint-- I'm using 678px in the fiddle-- I could have, say, "block 6" appear under "block 3"?
For the first question, I have been reading articles and other threads about using inline-block instead of float although I would prefer to not have to deal with the whitespace issue that seems to occur. If this is the only viable route, however, can it be implemented in a way that minimizes these sorts of quirks? (I've always used floats for layout...)
Thanks very much for any feedback here.

Answer 1

Please take a look at this, I have modified your CSS a little bit:
/*-------------------- clearfix --------------------- */
.cf:before,
.cf:after {
content: "";
display: table;
}
.cf:after {
clear: both;
}
.cf {
*zoom: 1;
}
/*-------------------- main --------------------- */
.container {
max-width: 960px;
padding: 2%;
}
.block {
font-family: sans-serif;
color: #fff;
background-color: #7f7f7f;
font-weight: bold;
text-align: center;
margin-bottom: 20px;
}
.one {
float: left;
width: 30%;
height: 150px;
margin-right: 2%;
}
.two {
float: right;
width: 67%;
height: 250px;
}
.three {
float: left;
clear: left;
width: 30%;
height: 150px;
margin-right: 2%;
}
.four {
float: right;
width: 67%;
height: 250px;
}
.seven {
float: right;
width: 67%;
height: 250px;
}
.six {
float: right;
width: 67%;
height: 200px;
}
.five {
float: left;
clear: left;
width: 30%;
height: 450px;
margin-right: 2%;
}
.eight {
float: left;
width: 30%;
height: 200px;
margin-right: 2%;
}
/* 678 breakpoint ----------- */
#media only screen and (max-width: 678px) {
.block {
width: 100% !important;
float: none !important;
}
}
<div class="container cf">
<div class="block one">1</div>
<div class="block two">2</div>
<div class="block three">3</div>
<div class="block four">4</div>
<div class="block five">5</div>
<div class="block six">6</div>
<div class="block seven">7</div>
<div class="block eight">8</div>
</div>
First of all, in your original fiddle, the styles which had to be assigned to .five div, i.e. float: left; width: 30%; height: 150px; margin-right: 2%;, were assigned to .seven div and the styles which had to be assigned to .seven div, i.e. float: right; width: 67%; height: 250px;, were assigned to .five div. Moreover, I added clear: left; to .five div and increased its height.
Secondly, as far changing the order of boxes is concerned at a certain break-point, you can achieve that using CSS only by adding another div of .six after .three div and hiding it on desktop and showing it only at the break-point, here's an example (view the code snippet in full page and then resize your browser):
/*-------------------- clearfix --------------------- */
.cf:before,
.cf:after {
content: "";
display: table;
}
.cf:after {
clear: both;
}
.cf {
*zoom: 1;
}
/*-------------------- main --------------------- */
.container {
max-width: 960px;
padding: 2%;
}
.block {
font-family: sans-serif;
color: #fff;
background-color: #7f7f7f;
font-weight: bold;
text-align: center;
margin-bottom: 20px;
}
.one {
float: left;
width: 30%;
height: 150px;
margin-right: 2%;
}
.two {
float: right;
width: 67%;
height: 250px;
}
.three {
float: left;
clear: left;
width: 30%;
height: 150px;
margin-right: 2%;
}
.four {
float: right;
width: 67%;
height: 250px;
}
.seven {
float: right;
width: 67%;
height: 250px;
}
.six {
float: right;
width: 67%;
height: 200px;
}
.five {
float: left;
clear: left;
width: 30%;
height: 450px;
margin-right: 2%;
}
.eight {
float: left;
width: 30%;
height: 200px;
margin-right: 2%;
}
.show {
display: none;
}
/* 678 breakpoint ----------- */
#media only screen and (max-width: 678px) {
.block {
width: 100% !important;
float: none !important;
}
.hide {
display: none;
}
.show {
display: block;
}
}
<div class="container cf">
<div class="block one">1</div>
<div class="block two">2</div>
<div class="block three">3</div>
<div class="block six show">6</div>
<div class="block four">4</div>
<div class="block five">5</div>
<div class="block six hide">6</div>
<div class="block seven">7</div>
<div class="block eight">8</div>
</div>
As you can see, there are two instances of the .six div in the HTML structure above. First is <div class="block six show">6</div> which is after the .three div and the other is <div class="block six hide">6</div>before the .seven div. For the desktop view, I am hiding the first instance of .six div by setting display: none on .show and inside the media-query, I am hiding the second instance of .six div by setting display: none on .hude and showing the first instance of .six div by setting display: block on .hide.

Answer 2

You can do it but you have to be careful that your right boxes don't exceed the height of the left or it won't tuck under and you may have other alignment problems. Put your content in small viewport order, or the order that it is numbered.
I would suggest, if you want to only have a css way of doing this, using flexbox. It's not fully supported in legacy browsers, but you can have a fallback if you use modernizr. Google "flexbox css" w/o the quotes and there's lots of tutorials.
Edit: I just noticed that 7 is not in the even odd order. I'll leave this for now but will probably delete it tomorrow.
DEMO:http://jsfiddle.net/aut5haxv/1/
CSS
.clearfix:before,
.clearfix:after {
content: "";
display: table;
}
.clearfix:after {
clear: both
}
.container {
max-width: 960px;
padding: 2%;
box-sizing:border-box;
border:1px solid blue;
}
.container .column:nth-child(odd) {
width: 30%;
float: left;
}
.container .column:nth-child(even) {
width: 68%;
float: right;
}
.column {
font-family: sans-serif;
color: red;
font-weight: bold;
text-align: center;
padding: 15px;
box-sizing: border-box;
border: 1px solid red;
margin-bottom:2%;
}
.one {
height: 150px
}
.two {
height: 250px
}
.three {
height: 250px;
clear:left;
}
.four {
height: 450px
}
.five {
height: 450px;
}
.six {
height: 350px
}
.seven {
height: 250px
}
.eight {
height: 200px;
}
#media only screen and (max-width:678px) {
.container .column:nth-child(odd),
.container .column:nth-child(even) {
width: 100%;
float: none;
}
}
HTML:
<div class="container clearfix">
<div class="column one">1</div>
<div class="column two">2</div>
<div class="column three">3</div>
<div class="column four">4</div>
<div class="column five">5</div>
<div class="column six">6</div>
<div class="column seven">7</div>
<div class="column eight">8</div>
</div>