Use CSS + Div for a simple center structure

CSS:

# A1 {width: 400px; Height: 200px; margin: 0 auto ;}
. B {float: Left; width: 200px; Height: 200px; Background-color: #666666 ;}
. B1 {float: Left; width: 200px; Height: 200px; Background-color: #666666 ;}

HTML:

<Div id = "A1">
<Div class = "B"> first </div>
<Div class = "B1"> second </div>
</Div>

 

CodeVery simple. Note: float is used to arrange two elements side by side. margin is used to arrange elements in a simple center.

The DIV with ID = A1 actually starts a container that fully integrates the B B1 element. Why is this done because of the mutual exclusion between margin and float.

Result: