Gorg Gorg - 6 months ago 8
CSS Question

Aligning divs in a row without using float

I am trying to create a 2x2 grid structure using 4 divs wrapped inside a

.container
without using
float
like so:

[ ][ ]
[ ][ ]


However when I try to do so I am instead experiencing this:

[ ]
[ ]
[ ]
[ ]


The
.box
es need to be 50% height and width with no border or margins.
This is the code I am using to try and achieve this:

HTML

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


CSS

.container{
width:600px;
height:700px;
position:relative;
}
.box{
display:inline-block;
width:50%;
height:50%;
background:red;
}


Here is the JSfiddle to demonstrate.

Answer

Make change in your html like:

<div class="box"></div><!--
--><div class="box"></div><!--
--><div class="box"></div><!--
--><div class="box"></div>
</div>

Or

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

Remove space between box div as you are using display:inline-block

Working Fiddle

More info

Comments