Align 2 Divs side by side

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

You probably have to add at least some of the concrete html you're using. Without it's really just guessing. — Yoshi, Mar 13 '12 at 11:42
possible duplicate of [How to float 3 divs side by side using CSS](http://stackoverflow.com/questions/2156712/how-to-float-3-divs-side-by-side-using-css) — sandeep, Mar 13 '12 at 11:44
It's a common thing search that keyword in google & stack you get lost of answers — sandeep, Mar 13 '12 at 11:50

Zoltan Toth · Accepted Answer · 2016-11-17T13:51:52.547

17

#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>

edited Nov 17 '16 at 13:51

answered Mar 13 '12 at 11:42

Zoltan Toth

46,981
12
120
134

1

Already tried this and it didn't work. I really don't know why tho, cause usually this is the solution. – Vetaxili Mar 13 '12 at 12:33
2

Probably your page or your wrapper is not wide enough and the 2nd `div` gets pushed under the 1st one – Zoltan Toth Mar 13 '12 at 22:48

Ashwin Krishnamurthy · Answer 2 · 2016-11-17T19:15:27.367

Use float : left, here is a simple example illustrating the usage of floats.

DEMO

Taking your case into account, this css oughta do the trick

#content {
    float : left;
    width: 580px;
    height:auto;
}     
#sidebar {
    float : left;
    width: 270px;
    height:auto;
    float:right;

}

Provided you have a container with a width greater than the sum of the widths of the #sidebar and the #content elements. If the container width is lesser, one will appear below the other as shown in the demo.

Zuazua · Answer 3 · 2012-03-13T12:00:56.327

1

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.

edited Mar 13 '12 at 12:00

answered Mar 13 '12 at 11:49

Zuazua

87
1
9

Align 2 Divs side by side

3 Answers3

Linked

Related