I have a main container with a width of 940 pixels.
Inside the main container, there are two divs with a width of 250px each.
My goal is to center align these boxes within the main container. However, the issue arises when the second div is added dynamically. If the second div is not present, the first one should be centered. When the second div is added, both should be centered within the 940px main div.
I've tried various methods but haven't found a solution yet. Please help!
Here is the simplified code:
CSS
div.box {
background: #EEE;
height: 400px;
width: 940px;
}
div.left {
background: #999;
float: left;
height: 390px;
width: 250px;
}
div.right {
background: #666;
height: 390px;
width: 250px;
float: left;
}
div.clear {
clear: both;
}
HTML
<div class="box">
<div class="left">Tree</div>
<div class="right">View</div> (this div will be dynamically added)
<div class="clear" />
</div>
Thank you