Align 2 Divs Side by Side

Question

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

I have 2 divs. 1 div is “content” - it contains all the basic information displayed in the table. The second div is the "sidebar" - it only has extra garbage images, twitter, etc.

This is my CSS.

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

}

I tried to play with positioning, fields containing those 2 divs in another - wrapper - one, but it either does not work or creates another problem. It's funny that I'm rewriting my old website, and even if I copy the old attributes, it still doesn't work. Does anyone have an idea?

EVERYONE SHOULD DO! Lol

SOLUTION: Delete the #clear div, which I completely 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

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

Demo

Given your case, this css should do the trick

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

If you have a container with a width greater than the sum of the width of the #sidebar and #content . If the width of the container is less, it will appear below the other, as shown in the demo.

Answer 3

To answer correctly, I need to see not only two CSS identifiers, for example, an HTML page and a CSS file, but I did this:

Jsfiddle

And maybe it can help you.