<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>
Here we have placed multiple DIVs inside another wrapper DIV of class="wrapper". This wrapper div is placed inside of the main container DIV of class="parent".
The wrapper DIV’s margin has been set as margin: 0 auto which places this wrapper DIV of class="wrapper"centrally w.r.t container parent div of class="parent"
Inside the child div we have used two separate class style features by this code : class="color_change_with_centering_text content"
So this DIV uses both styles
.content { height: 100px; width: 100px; background-color: yellow; color:#000000; float: left }
.color_change_with_centering_text { height: 75px; width: 75px; background-color:#99FF33; color: red; text-align:center }
class="content" has a property float LEFT which places the child div at left aligned within WRAPPER DIV. You must specify the width of WRAPPER DIV, here we have used width: 175px which is the SUM of widths of all child DIVs. If you don’t use width for WRAPPER DIV of class=wrapper then wrapper DIV will take whole 100% width of parent, and the two child divs of class=content will be left aligned.
What we have done is , we have placed WRAPPER div centrally placed with respect to container DIV (parent div) , then placed content DIVs or child DIVs with respect to WRAPPER DIV.
.content { height: 100px; width: 100px; background-color: yellow; color:#000000; float: left }
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 TWO vertically placed child divs inside parent 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>Side by Side placing 2 child DIVs within Wrapper DIV</title>
<style>
.parent { height: 400px; width: 400px; background-color: green; color:#FFFFFF; position: relative;}
.wrapper { position: relative; width: 175px; margin:0 auto;}
.content { height: 100px; width: 100px; background-color: yellow; color:#000000; float: left }
.color_change_with_centering_text { height: 75px; width: 75px; 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>