Keeping Floated divs inline

Question

Ich habe Probleme, mein Layout richtig funktioniert, habe ich ein Haupt-Div und eine Sidebar div diese beiden sind float: left wenn die Bildschirmgröße in der Größe geändert wird oder wenn auf dem Bildschirm kleiner, was ich entworfen habe auf (1920x1080) dann fällt die Seitenleiste div unter den Hauptinhalt.

Ich habe versucht, einen Wrapper um jedes Div zu platzieren, aber das hat keinen Effekt.

<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; 
} 

Grundsätzlich sollten beide Divs die Größe ändern, bis eine bestimmte Größe erreicht ist, dann sollte das Scrollen aktiviert werden. Ich bin mir ziemlich sicher, dass ich etwas Einfaches falsch gemacht habe, aber ich bin nicht viel von einer Design-Person. Link für jede Beratung

Thanks :)

Answer 1

Karpie hat Recht.

Auch warum nicht einfach mit einem Hauptteil beginnen, sagen wir 1000px in der Breite messen, dann arbeiten Sie darin? Wenn Sie das nicht können, wählen Sie einen Messtyp, wie px, und bleiben Sie bei den Breiten, Klötzen und Rändern dieser Elemente. Zumindest würde das das Rechnen erleichtern und wissen, wie viel Platz Sie haben oder nicht haben.

Ich bleibe in der Regel zu relativen Maßen, wie Pixel (Ich mag absolute nicht, es ist persönlich.: P).

EDIT

Ok, versuchen Sie dies, einen Wrapper um die gesamte Seite hinzufügen (nur mit mir zu testen, so kahl). Geben Sie diesem Wrapper eine ID wie # Hauptteil oder etwas und definieren Sie eine Breite. Legen Sie die Breite des Inhalts und der Seitenleiste fest. Wenn Sie den Bildschirm minimieren, sollte die Seitenleiste nicht unter den Inhalt div fallen. Es wird jedoch außerhalb des Aussichtshafens gehen.

/* 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; 
} 

Sorry für die Länge dieser. : P

Answer 2

Sie Vertauschen Prozent- und Pixel:

Beispiel kann hier gezeigt werden. 70% Breite + 30px Polsterung + 50px Rand (alle auf content) + 50px Rand + 15% Breite + 30px Polster (alle auf sidebar) können bis zu mehr als 100% ergeben.