CODEWITHSUNDEEP
htmlcssposition
ejfrancis
ejfrancis

Reputation: 3035

centered 2x2 grid

I'm trying to put together a page that has a grid of four square divs in the center. Here's what I've got, I think you'll be able to see what I intended to happen. What am I missing here to make the positioning work as it should?

http://jsfiddle.net/LKfd4/

HTML

<div id='main-container'>
 <div class='box' id='topleft'></div>
 <div class='box' id='topright'></div>
 <div class='box' id='bottomleft'></div>
 <div class='box' id='bottomright'></div>

</div>

CSS

#main-container{
    border:1px solid black;
    width:980px;
    height:700px;
    margin:0 auto;
    position:relative;
    top:20px;
}

.box {
    width:100px;
    height:100px;
    background:gray;
    border:2px solid #696969;
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box;    /* Firefox, other Gecko */
    box-sizing: border-box;  
}

#topleft{
    position:relative;
    margin:0 auto;
    top:50%;
    left:50%;
    margin-top:-110px;
    margin-left:-110px;
}
#topright{
    position:relative;
    margin:0 auto;
    top:50%;
    left:50%;
    margin-top:-110px;
    margin-left:10px;
}
#bottomleft{
    position:relative;
    margin:0 auto;
    top:50%;
    left:50%;
    margin-top:10px;
    margin-left:10px;
}
#bottomright{
    position:relative;
    margin:0 auto;
    top:50%;
    left:50%;
    margin-top:10px;
    margin-left:-110px;
}

Upvotes: 2

Views: 4157

Answers (1)

Eric Goncalves
Eric Goncalves

Reputation: 5353

Remove position: relative; from #topleft, #topright, #bottomleft, #bottomright. And add position: absolute; to .box.

jsfiddle: http://jsfiddle.net/G85fM/

udpated jsfiddle (with regards to @Neils comment): http://jsfiddle.net/G85fM/1/

Upvotes: 5

Related Questions