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. 😛 Now I feel stupid. 😛

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>