columns in the responsive grid system

Question

I'm trying the Responsive Grid System for the first time and having real trouble getting my columns to sit side by side. I'm only using a two column grid for some of the design elements and centered content for the rest.

Here's the relevant bit of html:

<div class="section group" id="about">
   <div class="col span_1_of_2" id="p1">
      <p>Lorem ipsum dolor sit amet</p>
   </div>
   <div class="col span_1_of_2" id="p2">
      <p>Lorem ipsum dolor sit amet</p>
   </div>
</div>

and css:

.section {
clear: both;
padding: 0px;
margin: 0px;}

.col {
display: block;
float: left;
margin: 1% 0 1% 1.6%;}

.span_2_of_2 {
width: 51.8%;}
.span_1_of_2 {
width: 49.2%;}

Why are my columns lying in one column instead of side by side? What am I missing?

(you can find the responsive grid here)

Thanks everybody

mdesdev mdesdev · Accepted Answer · 2013-11-28T18:47:18

Width problem, here's a Fiddle

.col have margin left 1.6% which gives 100% - 1.6% - 1.6% / 2 = 48.4% for .span_1_of_2 so

.span_1_of_2 {
  width: 48.4%;
}

*Note: This is based on your HTML because you've only used .span_1_of_2, in the Fiddle used both spans and set them to this dimension.

columns in the responsive grid system

3 Answers