página dividida verticalmente usando CSS

Question

siento chicos para el muy simple pregunta, pero he tratado de flotar una izquierda div y uno derecho con anchos predefinidos a lo largo de estas líneas

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

Aunque esta 'mayoría' obras parece que meterse los otros elementos en la página debajo de él.

Entonces, ¿cuál es la razón por la cual dividir una página HTML verticalmente en dos partes usando CSS sin afectar a otros elementos en la página?

Answer 1

puede utilizar ..

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

ahora por debajo de este elemento no se verá afectado.

Answer 2

Solo agregue desbordamiento: automático; div a los padres

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

Working Demo

Answer 3

supongo que sus elementos en la página meta la pata porque no limpiar su flota, mira esto

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

También puede haber una solución teniendo ambos float a left.

Trate de hacer esto:

Working Demo

P. S. Esto es sólo una mejora de la respuesta de Ankit

Answer 5

Control hacia fuera este violín:

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

código CSS/HTML:

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

Esto nos es la propiedad CSS float para las alineaciones izquierda, derecha y central de div s en una página.