Estoy tratando de conseguir dos divs siempre de lado a lado, incluso cuando el contenedor es demasiado pequeño. Quiero ocultar el desbordamiento de la derecha div, pero parece que no puede lograr esto. Cuando se cambia el tamaño del navegador para hacer la barra de desplazamiento aparecen en el cuerpo, la mano derecha de la div se mueve hacia abajo por debajo.

Aquí está mi código HTML hasta ahora:

<!DOCTYPE html>
<html>
<head>
<style>
body {
margin: 0;
padding: 0;
min-width: 800px; overflow: auto;
}       
span { display: block; }
#div-outer {
width: 95%;
height: 300px;
padding: 2px;
border: 4px solid green;
display: block;
}
#div-box-left {
border: 3px solid black;
width: 250px;
height: 250px;
float: left;
display: inline-block;
}
#div-box-right {
border: 3px solid red;
height: 250px;
margin-left: 10px;
overflow: hidden;
float: left;
display: inline-block;
}
#tbl {
background: yellow;
border: 3px solid blue;
}
</style>
</head>
<body>
<span>Wide div to contains two divs</span>
<div id="div-outer">
<div id="div-box-left">
Left div with a width of 250px
</div>
<div id="div-box-right">
<span>This contains a table but is too wide to fix - I want the table's overflow hidden</span>
<table id="tbl">
<tr>
<td>Column</td>
<td>Column</td>
<td>Column</td>
<td>Column</td>
<td>Column</td>
<td>Column</td>
<td>Column</td>
<td>Column</td>
<td>Column</td>
<td>Column</td>
<td>Column</td>
<td>Column</td>
<td>Column</td>
<td>Column</td>
<td>Column</td>
<td>Column</td>
<td>Column</td>
</tr>
</table>
</div>
</div>
</body>
</html>

4 Comentarios

  1. 1

    Usted podría necesitar otra div, alternativamente, se podría aplicar el estilo de .outer en el cuerpo:

    Ejemplo simplificado

    CSS:

    .outer{width: 600px; overflow:hidden; border:2px solid lightblue; padding:10px;}
    .innerwrap{width:9999px;}
    .inner{width:400px; height:200px; border:2px solid salmon; float:left;}

    HTML:

    <div class="outer">
    <div class="innerwrap">
    <div class="inner"></div>
    <div class="inner"></div>
    </div>

    Su ejemplo, fijo.

  2. 1

    Reordenar su divs:

    <div id="div-outer">
    <div id="div-box-right"><div>
    ...
    </div></div>
    <div id="div-box-left">
    ...
    </div>
    </div>

    y cambiar css:

    #div-box-left {
    border: 3px solid black;
    width: 250px;
    height: 250px;
    float: left;
    margin-left: -100%;
    }
    #div-box-right {
    float: left;
    width: 100%;
    }
    #div-box-right > div {
    border: 3px solid red;
    height: 250px;
    margin-left: 10px;
    overflow: hidden;
    margin-left: 260px;
    }

    Se puede ver este trabajo aquí.

  3. 1

    He encontrado este código de abajo, muy útil, tal vez pueda ayudar a cualquier persona que viene a buscar y quiere un resultado rápido –

    <html>
    <body>
    <div style="width: 50%; height: 50%; background-color: green; float:left;"></div>
    <div style="width: 50%; height: 50%; background-color: blue; float:right;"></div>
    <div style="width: 100%; height: 50%; background-color: red; clear:both"></div>
    </body>
    </html>
  4. 0

    Sé que este es un viejo post, pero la mejor manera de hacerlo es utilizar la propiedad display de flex. Todos los estilo, además de la propiedad display es solo para ilustrar la colocación de los divs.

    HTML:

    <div id="div-outer">
    <div id="div-box-right">
    ...
    </div>
    <div id="div-box-left">
    ...
    </div>
    </div>
    <style>
    #div-outer {
    display: flex;
    border: thin solid red;
    }
    #div-outer div {
    border: thin solid black;
    height: 50px;
    width: 50px;
    margin: 5%;
    }
    </style>

Dejar respuesta

Please enter your comment!
Please enter your name here