I'm trying to create two side by side divs in a wrapper. The first div, #content, is a position:relative div.
#wrapper {
background-image: url(assets/images/BG2.gif);
margin-right: auto;
margin-left: auto;
width: 996px;
overflow: auto;
}
#content {
position: relative;
top: 10px;
left: 10px;
width: 745px;
background-color: red;
}
#important {
float: right;
position: relative;
top: -1120px;
width: 231px;
margin-right: 10px;
background-color: green;
}
The problem is that the second div, #important, is displayed under the first one. There is enough space for both divs and the padding/margins. I can make it work by floating it to the right and using a negative top position and it displays fine, but I feel as though there is a better/correct way of doing this.
HTML:
<div id="wrapper">
<div id="content">
<img src="assets/photos/bid day 046.jpg" alt="Bid Day" width="745" height="311" />
<div id="fraternity">
<p align="center"><span class="style5"><strong>TITLE</strong><br />
Subtitle<br />
Sub-subtitle</span></p>
<p align="justify">depry derp</p>
<p align="justify">derp derp derp</p>
<p class="style5" align="center"><br/><strong>Title<br/>
Twitter Feed</strong></p>
<div id="twitter">
<script src="http://widgets.twimg.com/j/2/widget.js"></script>
<script>...</script>
</div>
</div>
<div class="fb-like-box" data-href="something" data-width="292" data-colorscheme="dark" data-show-faces="false" data-stream="true" data-header="false">
</div>
</div>
<div id="important">
<p align="center"><strong>IMPORTANT INFORMATION</strong><br />Derp!</p>
<img class="divider" src="assets/images/hr.gif" alt="HR" width="183" height="15" />
<p align="center"><strong>Achievements<br /></p>
<img class="divider" src="assets/images/hr.gif" alt="HR" width="183" height="15" />
<p align="center" class="style11"><strong>UPCOMING EVENTS<br /></strong>stuff<br /></p>
<p align="center"><br /> <strong>more stuff</strong><br /></p>
</div>
</div>