Two Column Width 50% Css

I want to make a two column layout using DIVs, where right column will have 50% width and the left one would take 50% too. How can I do that?

Solution 1:

Demo

html

<divclass="div1">Left div</div><divclass="div2">Right div</div>

css

body, html {
    width: 100%;
    height: 100%;
    margin:0;
    padding:0;
}
.div1 {
    width: 50%;
    float: left;
    background: #ccc;
    height: 100%;
}
.div2 {
    width: 50%;
    float: right;
    background: #aaa;
    height: 100%;
}

Solution 2:

There are a large number of ways, without knowing what you've attempted, what your requirements are, what will work for you and what wont its a bit of a shot in the dark - but I'll give you a high level example of a number of techniques.

1. Use inline elements with 50% width, they will next against one another horizontally

2. Float two elements with width 50%, they will nest horizontally

3. Use CSS3 columns

4. Use CSS tables with two table cells, one for each column

I would tend to recommend using the CSS column approach if supported, as it is specifically designed for the purpose...that said, its hard to know what the precise purpose at hand is.

Examples

HTML

<h1>Inline</h1>

<div class='inline'></div>
<div class='inline'></div>

<h1>Float</h1>

<div class='float'></div>
<div class='float'></div>

<h1>Columns</h1>

<div class='cols'>text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text</div>

<h1>Table</h1>

<div class='table'>
    <div class='cell'></div>
    <div class='cell'></div>
</div>

CSS

html, body {
    width:100%;
    font-size:0;
    margin:0;
    padding:0;
}
h1 {
    font-size:20px;
}
div {
    border:1px solid;
    height:200px;
    width:50%;
    box-sizing:border-box;
    font-size:14px;
}
.inline {
    display:inline-block;
}
.float {
    float:left;
}
.cols {
    -webkit-column-count:2;
    width:100%;
}
.table {
    display:table;
    width:100%;
}
.cell {
    display:table-cell;
}