Question

I have a site that I’d like to layout like this image:

Red is the desktop version and yellow is the mobile version. I can easily switch between the two using media queries.

My problem is how to write the CSS for the desktop version – I only include the mobile version because the layout precludes some layout techniques for the desktop version.

The content within each pair (e.g. A and B) can be of different heights, but they’re similar enough that I’d like to lay them out as equal heights so the next pairs headers line up.

The easiest way I guess is to hardcode the heights for each pair, but I’d rather avoid that if possible.

Answer 1

You should use a container for those elements.

for example a <ul> and the elements themselves be <li> elements.

example html

<ul class="container">
    <li>A</li>
    <li>B</li>
    <li>C</li>
    <li>D</li>
    <li>E</li>
    <li>F</li>
</ul>

desktop CSS

ul.container li{
  width:45%;
  margin-right:5%;
  float:left;
}

ul.container li:nth-child(odd){
  clear:left;
}

mobile CSS

ul.container li{
  width:100%;
}

Demo at http://jsfiddle.net/gaby/AgNjB/1

---

notice

The above code works if you only want to line-up their headers (the left and right tops are at the same place). But it will need alterations if you want their actual height to line up as well (for a bottom border for instance)..