Two column width 50% css [closed] - html

Question

Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 8 years ago.
Improve this question
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?

Answer 1

Demo
html
<div class="div1">Left div</div>
<div class="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%;
}

Answer 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.
Use inline elements with 50% width, they will next against one another horizontally
Float two elements with width 50%, they will nest horizontally
Use CSS3 columns
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;
}