并排排成两排

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 * but they didn't work either. I've run out of ideas.

我从来没有遇到过将divs并排对齐的问题，但是出于某种原因，无论我做什么都不管用。我尝试了一些*的答案，但它们也没有效果。我的想法都用完了。

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.

我有两个divs。一个div是“content”——它包含了一个表中显示的所有主要信息。第二个div是“侧边栏”——它有一些额外的垃圾，比如图片、twitter feed等等。

This is my CSS

这是我的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?

我试着玩定位，边缘，包含这两个div在另一个包装-一个但它不是工作或制造另一个问题。有趣的是，我正在重写我的旧网站，即使我复制旧的属性它仍然不能工作。任何人有任何想法吗?

EVERYONE IS ALLOWED TO LAUGHT! LOL

每个人都可以被赞美!哈哈

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

解决方案:删除div #clear，我完全忘记了!提线木偶。现在我觉得自己很蠢。:- p

3 个解决方案

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

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

要正确地回答问题，我需要看到的CSS id不止两个，比如HTML页面和CSS文件，但我做到了:

JSFiddle

And maybe could help you.

也许能帮到你。

#3

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

使用float: left，这里有一个简单的例子说明了float的用法。

DEMO

演示

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

考虑到您的情况，这个css应该可以达到这个目的

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

假设您有一个宽度大于#侧栏和#content元素宽度之和的容器。如果容器的宽度较小，其中一个将显示在另一个的下面，如图所示。

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

#2