Divs sitting side by side on some browsers but not others - html

Question

I'm trying to get two divs to sit side by side. On my computer, in Safari and Firefox, it appears correctly. However, on my client's computer (also using Safari) they are overlapping.
Here is my CSS:
#content
{
clear: left;
float: left;
width: 715px;
padding:0;
margin: 41px 0 0 152px;
display: inline;
}
#aside
{
min-height: 850px;
float: right;
width: 280px;
padding: 50px 40px 0 40px;
margin: 0px 150px 0 65px;
display: inline;
position:absolute;
}
Is there something I missing or have coded wrong? I'm not a web developer but have been tasked with creating a fairly simple page.
Thanks in advance.

Answer 1

If you want something simple and straightforward (assuming #content and #aside are two sibling divs)...
<div id="content"></div><div id="aside"></div>
#content, #aside {
float: left;
}
#content {
background: red;
width: 150px;
height: 150px;
}
#aside {
background: orange;
width: 280px;
height: 150px;
}
Here's a Fiddle to demonstrate
Note: this is a simple solution that might not be the best for what you need. I suggest doing some research on CSS display and position properties.

Answer 2

Hey just change the display property to display: inline-block. You dont need to float any div if you want the div to sit side by side.
#content
{
width: 715px;
padding:0;
margin: 41px 0 0 152px;
display: inline-block;
}
#aside
{
min-height: 850px;
width: 280px;
padding: 50px 40px 0 40px;
margin: 0px 150px 0 65px;
display: inline-block;
position:absolute;
}
display: inline
It will not regard the width or height of any div. When we set display: inline, it will work as if its a "span" which does not regard width or height.
display: inline-block
It will regard the width or height of any div. When we set display: inline-block, it will be inline and it will regard the width and height of div.