Split Seite vertikal CSS

Question

Sorry Leute für die wirklich einfache Frage mit, aber ich habe versucht, in diese Richtung ein div links und rechts mit vordefinierten Breiten zu schweben

<div style="width: 100%;"> 
    <div style="float:left; width: 80%"> 
    </div> 
    <div style="float:right;"> 
    </div> 
</div> 

Obwohl diese ‚meist‘ funktioniert scheint es zu Chaos up die anderen Elemente auf der Seite darunter.

Was ist also der richtige Grund, um eine HTML-Seite mit CSS in zwei Teile aufzuteilen, ohne andere Elemente auf der Seite zu beeinflussen?

Answer 1

Sie verwenden können ..

<div style="width: 100%;"> 
    <div style="float:left; width: 80%"> 
    </div> 
    <div style="float:right;"> 
    </div> 
</div> 
<div style="clear:both"></div> 

jetzt Element wird dadurch nicht berührt.

Answer 2

Nur hinzufügen Überlauf: auto; Mutter div darunter

<div style="width: 100%;overflow:auto;"> 
    <div style="float:left; width: 80%"> 
    </div> 
    <div style="float:right;"> 
    </div> 
</div> 

Working Demo

Answer 3

Ich denke, Ihre Elemente auf der Seite vermasselt, weil Sie Ihre Schwimmer nicht ausräumen, check this out

Demo

HTML

<div class="wrap"> 
    <div class="floatleft"></div> 
    <div class="floatright"></div> 
    <div style="clear: both;"> 
</div> 

CSS

.wrap { 
    width: 100%; 
} 

.floatleft { 
    float:left; 
    width: 80%; 
    background-color: #ff0000; 
    height: 400px; 
} 

.floatright { 
float: right; 
    background-color: #00ff00; 
    height: 400px; 
    width: 20%; 
} 

Answer 4

Es kann auch eine Lösung geben, indem Sie sowohl float als auch left haben.

Probieren Sie dies aus:

Working Demo

P. S. Dies ist nur eine Verbesserung von Ankit Antwort-

Answer 5

Schauen Sie sich diese Geige:

http://jsfiddle.net/G6N5T/1574/

CSS/HTML-Code:

.wrap { 
 
    width: 100%; 
 
    overflow:auto; 
 
} 
 

 
.fleft { 
 
    float:left; 
 
    width: 33%; 
 
background:lightblue; 
 
    height: 400px; 
 
} 
 

 
.fcenter{ 
 
    float:left; 
 
    width: 33%; 
 
    background:lightgreen; 
 
    height:400px; 
 
    margin-left:0.25%; 
 
} 
 

 
.fright { 
 
float: right; 
 
    background:pink; 
 
    height: 400px; 
 
    width: 33.5%; 
 
    
 
}

<div class="wrap"> 
 
    <!--Updated on 10/8/2016; fixed center alignment percentage--> 
 
    <div class="fleft">Left</div> 
 
    <div class="fcenter">Center</div> 
 
    <div class="fright">Right</div> 
 
</div>

Diese uns es ist die CSS float Eigenschaft für die linke, rechte und mittlere Ausrichtung von div s auf einer Seite.