Reputation: 3958
I am wondering what is the best way to create this 3*2 "table" using DIVS?
I am really tempted to use simple tables code
<table>
as it would be easier, but the trend today is to use Divs. Therefore, what would be the best, elegant way to create something like this?
I always wondered why tables suddenly disappeared, I used to create websites using only tables (time ago).
Upvotes: 0
Views: 938
Reputation: 734
you can also use https://jsfiddle.net/ftwn8q7w/1/
<div class="raw">
<div class="col"></div>
<div class="col"></div>
<div class="col"></div>
</div>
<div class="raw">
<div class="col"></div>
<div class="col"></div>
<div class="col"></div>
</div>
.raw{
display:table;
width:100%;
}
.col{
display:table-cell;
border:1px solid;
height: 100px;
}
Upvotes: 1
Reputation: 2202
If you can get away with only having to support IE10+, you can use flexbox:
*,*:before,*:after{
box-sizing: border-box;
}
.container{
border: 1px solid black;
display: flex;
flex-wrap: wrap;
}
.cell{
width: 33.33%;
height: 100px;
border: 1px solid black;
}
<div class="container">
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
</div>
pen here if you want to play around with it - http://codepen.io/braican/pen/QbdbYb
Upvotes: 2
Reputation: 27265
Simplest answer:
div {
width: 33%;
float: left;
border: 1px solid black;
height:100px;
}
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
Upvotes: 2