Lo siento chicos para los que realmente simple pregunta, pero he tratado de flotador de un div a la izquierda y otro a la derecha con predefinidos anchos 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 este ‘principalmente’ obras parece un lío el de otros elementos en la página de abajo.

Entonces, ¿cuál es la correcta ¿por qué dividir una página HTML verticalmente en dos partes mediante el uso de CSS sin afectar a otros elementos de la página?

6 Comentarios

  1. 47

    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 elemento por debajo de este no se verá afectado.

    • Mientras que esto iba a funcionar, se considera una mala práctica para agregar elementos cuya única función es la de «borrar el contenido».
    • ¿Cuál es la mejor práctica en estos casos, entonces? (He estado pensando durante un tiempo cómo evitar «clearfix» divs)
    • lo que si necesito una línea entre ellos? no se puede utilizar a la izquierda|a la derecha de la frontera, ya no sé cuál será el más grande de todos los tiempo…
  2. 11

    Acaba de agregar overflow:auto; a los padres div

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

    Demo

    • usted acaba de poner height: 400px; en ambos lados.
  3. 8

    Creo que los elementos de la página se mete 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>
    </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%;
    }
    • probablemente la mejor respuesta, gracias
  4. 3

    También puede ser una solución al tener tanto float a left.

    Intenta esto:

    Demo

    P. S. Esta es solo una mejora de Ankit la Respuesta de

  5. 3

    Echa un vistazo a este violín:

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

    CSS/HTML código:

    CSS:

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

    HTML:

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

    Para ello se utiliza el CSS float de la propiedad para la izquierda, la derecha y el centro alineaciones de divs en una página.

  6. 0

    Alternativamente, usted puede también utilizar una función especial conocido como el linear-gradient() función dividir pantalla del navegador en dos mitades iguales.
    Revise el siguiente fragmento de código:

    body
    {
      background-image:linear-gradient(90deg, lightblue 50%, skyblue 50%);
    }

    Aquí, linear-gradient() función acepta tres argumentos

    1. 90deg para vertical división de pantalla.( De manera similar, puede utilizar 180deg para la división horizontal de la pantalla).
    2. lightblue color se utiliza para representar la mitad izquierda de la pantalla.
    3. skyblue color ha sido utilizado para representar la mitad derecha de la pantalla dividida.
      Aquí, 50% ha sido utilizado para igual división de la pantalla del navegador. Se puede usar cualquier otro valor si no quieres un igual división de la pantalla.
      Espero que esto ayude. 🙂
      Feliz Codificación!

Dejar respuesta

Please enter your comment!
Please enter your name here