浮動小数点数をインラインに維持

Question

レイアウトが正しく動作するのに問題がありますが、メインdivとサイドバーdivがあります。画面サイズが変更された場合、またはデザインしたものより小さい場合はfloat: leftです。 （1920x1080）、サイドバーdivはメインコンテンツの下に降ります。

各divの周りにラッパーを配置しようとしましたが、これは効果がありません。

<div id="header">  
     [Header]   
    </div> 

    <div id="content">  
     [Content]  
    </div> 

    <div id="sideBar"> 
     [SideBar] 
    </div> 

    <div id="footer"> 
     [Footer] 
    </div> 

body 
{ 
    width: 100%; 
    color: #000000; 
    background-color: #000000; 
    margin: 0; 
    padding: 0; 
} 

#header 
{ 
    width: 100%; 
    height: 110px; 
    background-color: #336699; 
    color: #FFFFFF; 
    margin: 0px; 
    padding: 0px; 
} 

#content 
{ 
    float: left; 
    margin-left: 50px; 
    width: 70%; 
    height: 700px; 
    margin-top: 40px;  
    padding: 30px; 
    background-color: #FFFFFF; 
    margin-bottom: 40px; 
} 

#sideBar 
{ 
    float: left;  
    margin-left: 50px; 
    width: 15%; 
    height: 400px; 
    margin-top: 40px; 
    padding: 30px; 
    background-color: #FFFFFF; 
} 

#footer 
{ 
    width: 100%; 
    height: 80px; 
    background-color: #174555; 
    margin: 0px; 
    padding: 0px; 
    color: #ffffff; 
    clear: both; 
} 

基本的に、両方のdivのサイズが一定のサイズに達するまでリサイズしてから、スクロールを有効にする必要があります。私は何か簡単なことは間違っているとはかなり確信していますが、私はデザインの人ではあまりありません。

例をここに示すことができます。何かアドバイスのためLink

感謝を:)

Answer 1

カルピーズの権利。

また、1つのメインディビジョンから始めて、1000pxの幅を測定し、その中で作業するのはなぜですか？あなたができない場合は、pxのような測定タイプを選択し、それらの要素の幅、パディング、およびマージンに固執します。少なくとも、それはあなたの数学をやり、あなたが持っているか持っていないかを知ることを容易にします。

私は一般的にピクセルのような相対的な測定に固執しています（私は絶対的に好きではない、個人的です。：P）。 [OK]を

EDIT

、（私とそう裸、単にテストするために）、ページ全体の周りにラッパーを追加し、これを試してみてください。そのラッパーに＃本体や何かのようなIDを与え、幅を定義します。コンテンツとサイドバーの幅を設定します。画面を最小化すると、サイドバーがコンテンツdiv以下になることはありません。しかし、それはビューポートの外に行くだろう。

/* Wrap all in #main-body with specified width */ 

#main-body{ 
    width:1000px; 
    margin:0 auto; 
} 

/* give these elements a relative width */ 

#content 
{ 
    float: left; 
    margin-left: 50px; 
    width:600px; 
    height: 700px; 
    margin-top: 40px;  
    padding: 30px; 
    background-color: #FFFFFF; 
    margin-bottom: 40px; 
} 

#sideBar 
{ 
    float: left; 
    width:100px; 
    margin-left: 50px; 
    height: 400px; 
    margin-top: 40px; 
    padding: 30px; 
    background-color: #FFFFFF; 
} 

ご迷惑をおかけして申し訳ございません。 ：P

Answer 2

あなたはパーセンテージおよびピクセルを混合しています。 70％幅+ 30pxパディング+ 50pxマージン（すべてcontent）+ 50pxマージン+ 15％幅+ 30pxパディング（すべてsidebar）は100％を超えて追加することができます。