How to align two div

With this example we would show how to perform the alignment of two boxes (in this case we use two div tags). "Alignment" means placing the two boxes horizontally next to each other. They will have the same height.

CSS

div#container {
	width: 90%;
	border: 1px solid #000;
	text-align: center;
}
div.split2 div {
	float: left;
	width: 50%;
}
div.wide {
	clear: left;
}

HTML Code

<div id="container">
<div class="split2">
   <div>
      <h1>Column title no. 1</h1>
      <p>The content of the first column.</p>
   </div>
   <div>
      <h1>Column title no. 2</h1>
      <p>The content of the second column.</p>
   </div>
</div>
<div class="wide"><p>This div has a clear set to prevent the float of the two columns of text.<br />
   <a href="http://www.icelab.eu/en/blog/css-4/how-to-align-two-div-4.htm">View full example</a></p></div>
</div>