Tag Archives: positioning div below another div

Horizontal centering TWO vertically placed child divs inside parent DIV

How to place vertically placed two child DIVs inside another PARENT DIV exactly horizontally centered.

PARENT DIV is of 400px width and height. Child is of 200px width and height. We have set the positioning property : RELATIVE of Parent div. That means inner DIVs inside parent will be placed relative to parent / container div.

Then we have placed a wrapper just outside of two vertical DIVs. Two child vertical DIVs are of margin: 0 auto , which places child DIVs with respect to WRAPPER divs.

We have tested the following codes in IE6,Opera 10, Firefox 4 and I hope it will work in other browsers too.

If you find out any problem then email me: bikramchoudhury@hotmail.com
Related Articles :
Horizontally centre a DIV block with respect to container DIV block
Horizontal Centering of (side by side placed Multiple Child DIV)s inside container DIV

HTML Source Code of the above topic, view picture


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Horizontal centering of two vertical divs of different width height</title>
<style>
.parent { height: 400px; width: 400px; background-color: green; position: relative;}
.wrapper { position: relative}
.content { height: 200px; width: 200px; background-color: yellow; margin:0 auto; }
.color_change_with_centering_text { height: 100px; width: 100px; background-color:#99FF33; color: red; text-align:center }
</style>
</head>
<body>
<div class="parent">
<div class="wrapper">
<div class="content">
Child block 1
</div>
<div class="color_change_with_centering_text content">
Child block</div>
</div>
</div>
</body>
</html>

Child block 1
Child block