CSS - Floating sections left and right, responsive design

Question

I am trying to create a responsive layout where some sections of an article will appear in a right hand column on larger breakpoints. The sections in each column must stack on top of each other.

The problem I am having is that box 4 is appearing opposite box 3, creating an unwanted gap under box 2 in the right hand column.

.wrapper {
  width: 400px;
}
.section {
  width: 50%;
}
.left {
  float: left;
  clear: left;
  background-color: #E26A6A;
}
.right {
  float: right;
  clear: right;
  background-color: #DCC6E0;
}

<body>
  <div class="wrapper">
    <div class="section left">1 Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
      dolor</div>
    <div class="section right">2</div>
    <div class="section left">3</div>
    <div class="section right">4</div>
  </div>
</body>

can you change the markup? meaning all the left element after each other in the markup? — web-tiki, Nov 27 '14 at 11:48
otherwise see this : http://stackoverflow.com/questions/26985139/is-it-possible-to-stack-unlimited-divs-left-or-right-arbitrarily-without-a-wrapp — web-tiki, Nov 27 '14 at 11:51

score 0 · Answer 1 · answered Nov 27 '14 at 11:37

0

set minimum height or height to the section div

.section {
    min-height: 200px;
    width: 50%;
}

http://jsfiddle.net/awkoL2sw/

answered Nov 27 '14 at 11:37

Jaishankar

168
11

The content in each div will vary, so the height needs to be variable for each section. – Beezer900 Nov 27 '14 at 11:42
for wrapper text use display:flex; – Jaishankar Nov 27 '14 at 12:20

Fabrizio Calderan · Answer 2 · 2014-11-27T12:00:13.117

Using flexbox with a simplified markup (in my example the classes on div elements are not really necessary) you could try like so: http://codepen.io/anon/pen/YPXJNM

Code

HTML

  <div class="wrapper">
    <div>1 Lorem ipsum dolor sit amet, ... dolor</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
  </div>

CSS

.wrapper div:nth-child(2n)     {  background: #DCC6E0; }
.wrapper div:nth-child(2n - 1) {  background: #E26A6A; }

.wrapper { 
  width: 100%; 
  display: flex;
  flex-wrap: wrap; }

.wrapper div { width: 50%; }

Screenshot

enter image description here

Flexbox support across browser and tutorials:

http://caniuse.com/#feat=flexbox
http://css-tricks.com/snippets/css/a-guide-to-flexbox/
https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Flexible_boxes

CSS - Floating sections left and right, responsive design

2 Answers2