Geek Answers Handbook

Responsive 50% 2 html / css columns

I suspect that what I want to achieve may not be possible with simple HTML / CSS, but it doesn’t matter here. I would like the 2-column layout to be well ported to mobile devices. Each column takes up 50% of the width of the container if there is room, but 100% of the width of the container if they are wrapped.

Here is a markup example:

<!doctype html>
<html xml:lang="en-gb" lang="en-gb" >
<head>
    <title>Responsive 2 col</title>
    <style type="text/css">
        .colcontainer
        {
            width: auto;
            overflow:hidden;
            border: solid 1px red;
        }
        .leftcol
        {
            width: 49%;
            float: left;
            margin-right:10px;
            border: solid 1px blue;
        }
        .rightcol
        {
            width: 49%;
            float: left;
            border: solid 1px green;
        }
    </style>
</head>
<body>
    <div class="colcontainer">
        <div class="leftcol">
            Here is a paragraph which has enough text to cause it to take up a fair amount of width if left to its own devices.
        </div>
        <div class="rightcol">
            A smaller paragraph.
        </div>
    </div>
</body>

This looks fine, but when you twist the width of the browser to crop the div, they still only occupy 50% of the width of the container. Having removed the width: 49%, it perfectly covers and fills the available width, but the columns are no longer evenly divided if they are not wrapped. Is there a way to make them fill the available width when packaging, but will take 50% of the available width if it is not packed?

+4
1

, , , , , , CSS

* {
   margin: 0;
   padding: 0;
   -moz-box-sizing: border-box;
   -webkit-box-sizing: border-box;
   box-sizing: border-box;
}

padding border .

-, , @media, .

( )

+4

More articles:


All Articles