Issue With Fluid, Responsive Layout And Floated Elements

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 cer

Solution 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 ----------- */@mediaonly screen and (max-width: 678px) {
  .block {
    width: 100%!important;
    float: none !important;
  }
}

<divclass="container cf"><divclass="block one">1</div><divclass="block two">2</div><divclass="block three">3</div><divclass="block four">4</div><divclass="block five">5</div><divclass="block six">6</div><divclass="block seven">7</div><divclass="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 ----------- */@mediaonly screen and (max-width: 678px) {
  .block {
    width: 100%!important;
    float: none !important;
  }
  .hide {
    display: none;
  }
  .show {
    display: block;
  }
}

<divclass="container cf"><divclass="block one">1</div><divclass="block two">2</div><divclass="block three">3</div><divclass="block six show">6</div><divclass="block four">4</div><divclass="block five">5</div><divclass="block six hide">6</div><divclass="block seven">7</div><divclass="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.

Solution 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;
}
@mediaonly screen and (max-width:678px) { 
    .container.column:nth-child(odd),
    .container.column:nth-child(even) {
        width: 100%;
        float: none;
    }
}

HTML:

<divclass="container clearfix"><divclass="column one">1</div><divclass="column two">2</div><divclass="column three">3</div><divclass="column four">4</div><divclass="column five">5</div><divclass="column six">6</div><divclass="column seven">7</div><divclass="column eight">8</div></div>