CSS snippet for a fluid responsive 2 column layout.

  1. 1/2 + 1/2 responsive 2 column layout
  2. 2/3 + 1/3 responsive 2 column layout
  3. 1/3 + 2/3 responsive 2 column layout
  4. 3/4 + 1/4 responsive 2 column layout
  5. 1/4 + 3/4 responsive 2 column layout

1/2 + 1/2

Two Column Layout with equal width content

HTML

<div class="col-left">

</div>

<div class="col-right">

</div>

<div class="clear"></div>
</code></pre>

<h4>CSS</h4>
<pre><code data-language="css">.col-left {
    width: 48%;
    float: left;
}

.col-right {
    width: 48%;
    float: right;
}

.clear {
    clear: both;
}
</code></pre>

<h4>Responsive CSS</h4>
<pre><code data-language="css">@media screen and (max-width : 767px) {
    .col-left, .col-right {
        width: 100%;
        float: none;
    }

    .col-left {
        padding-bottom: 30px;
    }
}
</code></pre>
</div>

<div id="snippet2" class="code-snippet">
<h3 style="text-align: center">2/3 + 1/3</h3>
<p style="text-align: center">Two Column Layout with 2/3 + 1/3 layout</p>

<h4>HTML</h4>
<div class="col-left">

</div>

<div class="col-right">

</div>

<div class="clear"></div>

CSS

.col-left {
    width: 60%;
    float: left;
}

.col-right {
    width: 36%;
    float: right;
}

.clear {
    clear: both;
}

Responsive CSS

@media screen and (max-width : 767px) {
    .col-left, .col-right {
        width: 100%;
        float: none;
    }

    .col-left {
        padding-bottom: 30px;
    }
}

1/3 + 2/3

Two Column Layout with 1/3 + 2/3 layout

HTML

<div class="col-left">

</div>

<div class="col-right">

</div>

<div class="clear"></div>

CSS

.col-left {
    width: 36%;
    float: left;
}

.col-right {
    width: 60%;
    float: right;
}

.clear {
    clear: both;
}

Responsive CSS

@media screen and (max-width : 767px) {
    .col-left, .col-right {
        width: 100%;
        float: none;
    }

    .col-left {
        padding-bottom: 30px;
    }
}

3/4 + 1/4

Two Column Layout with 3/4 + 1/4 layout

HTML

<div class="col-left">

</div>

<div class="col-right">

</div>

<div class="clear"></div>

CSS

.col-left {
    width: 75%;
    float: left;
}

.col-right {
    width: 22%;
    float: right;
}

.clear {
    clear: both;
}

Responsive CSS

@media screen and (max-width : 767px) {
    .col-left, .col-right {
        width: 100%;
        float: none;
    }

    .col-left {
        padding-bottom: 30px;
    }
}

1/4 + 3/4

Two Column Layout with 1/4 + 3/4 layout

HTML

<div class="col-left">

</div>

<div class="col-right">

</div>

<div class="clear"></div>

CSS

.col-left {
    width: 22%;
    float: left;
}

.col-right {
    width: 75%;
    float: right;
}

.clear {
    clear: both;
}

Responsive CSS

@media screen and (max-width : 767px) {
    .col-left, .col-right {
        width: 100%;
        float: none;
    }

    .col-left {
        padding-bottom: 30px;
    }
}

Note

@media screen and (max-width : 767px) {

767px is the viewport width, i.e. the width of the screen or the browser viewport. 768px is the portrait width of iPad 2, so anything under that is mostly considered as mobile viewport, if you wish to make the responsive css trigger before, change 767px to something higher