2つのDivsを並べて並べる

Question

divを並べて整列させることは一度もありませんでしたが、私が何をしても何の問題もありません。私はstackoverflowからいくつかの答えを試みたが、どちらも動作しませんでした。私はアイディアを使い果たした。

私は2つのdivです。 1 divは "content"です - すべてのメイン情報がテーブルに表示されます。第二にdivが「サイドバー」である - それは、画像のようなだけでいくつかの余分なゴミを持っている、さえずりなど

を養うこれは

私はポジショニングでプレーしようとした私のCSS

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

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

}、余白です2つのdivが別のラッパーに含まれていますが、動作しないか、別の問題が発生します。面白いほど私は古いウェブサイトを書き直しています。古い属性をコピーしても、それはまだ機能しません。誰もが考えている？

誰もが知っているように認められています！ LOL

解決策： 私が完全に忘れたdiv #clearを削除してください！どのようなマペット。 :-P今私は愚かだと感じる。 :-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

使用float : leftは、ここではフロートの使用方法を示す簡単な例です。アカウントにあなたのケースを取る

DEMO

、このCSSはあなたが#sidebarの幅の合計よりも大きいと幅を持つコンテナを持って提供トリック

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

} 

を行うダメ#content要素。コンテナの幅が小さければ、デモに示されているように、コンテナの幅が下に表示されます。

Answer 3

適切な方法で答えるために、私はHTMLページとCSSファイルのように、ちょうど2つのCSSのidのより詳細を参照する必要がありますが、私はこれでした：

JSFiddle

そして多分あなたを助けることができるの。