Simple four columns into a div without table- css

Intro :

Here I am going to explain how to implement four columns within a  single div without using table. Instead of table I use simple css code to achieve it.

Css code :

.largerectangle

 {

 position:relative;

 height:180px;

 width:700px;

 padding:10px;

 border:solid 1px #000;

}

 .box

 {

 display:block;

 width:150px;

 height:150px;

 border:dotted 1px #dedede;

 padding:5px;

 margin:5px;

 float:left;

}

HTML code:

<div class="large_rectangle" >

    <div class="box">one</div>

    <div class="box">two</div>

    <div class="box">three</div>

    <div class="box">four</div>

</div>

Check out the demo

Advertisement