html - DIV not appearing side by side -

html - DIV not appearing side by side -

i want div side side , not below, not sure why box2 keeps on appearing below box1. updated: actual code. removed links , references simplify it. not see divs missing.

<%@ command language="c#" autoeventwireup="true" codebehind="knowledgebase.ascx.cs" inherits="control_knowledgebase" %> <!-- opens page header div --> <!-- instanceendeditable --> <div id="maincontent"> <!-- opens main content div --> <!-- instancebegineditable name="maincontent" --> <h2 class="billboard"> <a href="#">system knowledge base</a></h2> <div class="billboard"> <p align="center"> <a href="../customercare.aspx">home</a> <a href="../customercare.aspx">customer care</a> <a href="../fieldcustomercare.aspx">field client care</a> <a href="../logout.aspx"> logout </a> </p> </div> <h2 class="billboard"> general scheme information</h2> <div class="billboard"> <p> 80 links , documents </p> </div> <h2 class="quicklinks"> build release notes</h2> <div class="quicklinks"style="float:left;width:48%;"> <p> 120 links , documents </p> </div> </div> <h2 class="quicklinks"> supplemental release notes</h2> <div class="quicklinks"style="float:left;width:48%;"> <p> 10 link , documents </p> </div> <h2 class="billboard"> tfacts client care</h2> <div class="billboard"> <p> 10 link , documents </p> </div> <h2 class="billboard"> reference materials , storyboards </h2> <div class="billboard"> <p> 250 links , documents </p> </div> <!-- instanceendeditable --> </div> <!-- closes main content div -->

fiddle http://jsfiddle.net/8gd0u79y/

some tags not proper

<div class="box1"> <h2 class="quicklinks"> build release notes</h2> <div class="quicklinks"><p>test</p> </div> </div> <div class="box2"> <h2 class="quicklinks"> supplemental release notes</h2> <div class="quicklinks"><p>test2</p> </div> </div>

add inline-block;

.box1,.box2{ display:inline-block; margin:10px; }

html css