Align 2 Divs side by side [closed]

Question

I've never had a problem with aligning divs side by side but for some reason no matter what I do it just doesn't work. I tried a few answers from stackoverflow but they didn't work either. I've run out of ideas.

What I have are 2 divs. 1 div is "content" - it has all main info displayed in a table. Second div is "sidebar" - it has just some extra rubbish like images, twitter feed etc.

This is my CSS

#content {
width: 580px;
height:auto;
}     

#sidebar {
width: 270px;
height:auto;
float:right;

}

I've tried to play with positioning, margins, containing those 2 divs in another - wrapper - one but it either doesn't work or creates another problem. Funny enough I am re-writing my old website and even if I copy the old attributes it still doesn't work. Anyone has any idea?

EVERYONE IS ALLOWED TO LAUGHT! LOL

SOLUTION: Delete div #clear which I totally forgot about! What a muppet. :-P Now I feel stupid. :-P

Answer 1

#content {
  background:#eee;
  width: 300px;
  height:auto;
  float: left;
}     

#sidebar {
  background:#c00;
  width: 200px;
  height:auto;
  float:left;
}

<div id="content">Content</div>
<div id="sidebar">Sidebar</div>

Answer 2

To answer in a proper way, I need to see more than just two CSS id's, like the HTML page and the CSS file, but I did this:

JSFiddle

And maybe could help you.