style - div html css
Expande div al ancho máximo cuando flotan: se establece a la izquierda (10)
Solución sin fijar el tamaño en su margen
.content .right{
overflow: auto;
background-color: red;
}
+1 para Merkuro, pero si el tamaño del flotador cambia su margen fijo fallará. Si utilizas CSS arriba en el div correcto, cambiará muy bien el tamaño con el cambio de tamaño en el flotador izquierdo. Es un poco más flexible así. Compruebe el violín aquí: http://jsfiddle.net/9ZHBK/144/
Tengo algo así:
<div style="width:100px;float:left">menu</div>
<div style="float:left">content</div>
ambos flotadores son necesarios. Quiero que el contenido div llene toda la pantalla menos esos 100 píxeles para el menú. Si no uso float, div se expande exactamente como debería. Pero, ¿cómo configuro esto cuando se establece float? Si uso algo como
style=width:100%
entonces el contenido div obtiene el tamaño del padre, que es el cuerpo u otro div que también probé, y por supuesto no encaja bien en el menú y luego se muestra a continuación.
Espero haber entendido bien, eche un vistazo a esto: http://jsfiddle.net/EAEKc/
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Content with Menu</title>
<style>
.content .left {
float: left;
width: 100px;
background-color: green;
}
.content .right {
margin-left: 100px;
background-color: red;
}
</style>
</head>
<body>
<div class="content">
<div class="left">
<p>Hi, Flo!</p>
</div>
<div class="right">
<p>is</p>
<p>this</p>
<p>what</p>
<p>you are looking for?</p>
</div>
</div>
</body>
</html>
Esto podría funcionar:
div{
display:inline-block;
width:100%;
float:left;
}
Hola, hay una manera fácil con el método de desbordamiento oculto en el elemento derecho.
.content .left {
float:left;
width:100px;
background-color:green;
}
.content .right {
overflow: hidden;
background-color:red;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Content Menu</title>
</head>
<body>
<div class="content">
<div class="left">
<p>Hi, Flo! I am Left</p>
</div>
<div class="right">
<p>is</p>
<p>this</p>
<p>what</p>
<p>you are looking for?</p>
<p> It done with overflow hidden and result is same.</p>
</div>
</div>
</body>
</html>
La forma más compatible que he encontrado de hacer esto no es muy obvia. Debe eliminar el flotante de la segunda columna y aplicar el overflow:hidden . Aunque esto parecería estar ocultando cualquier contenido que esté fuera del div, en realidad fuerza al div a mantenerse dentro de su padre.
Usando su código, este es un ejemplo de cómo se podría hacer:
<div style="width: 100px; float: left;">menu</div>
<div style="overflow: hidden;">content</div>
Espero que esto sea útil para cualquiera que tenga este problema, es lo que encontré que funciona mejor para el sitio que estaba construyendo, luego de tratar de ajustarlo a otras resoluciones. Desafortunadamente, esto no funciona si incluye un div flotante derecho después del contenido, si alguien sabe una buena manera de hacerlo funcionar, con buena compatibilidad con IE, estaría encantado de escucharlo.
Nueva, mejor opción usando display: flex;
Ahora que el modelo Flexbox se ha implementado de manera bastante amplia, en realidad, recomendaría usarlo, ya que permite mucha más flexibilidad con el diseño. Aquí hay una simple columna de dos columnas como el original:
<div style="display: flex;">
<div style="width: 100px;">menu</div>
<div style="flex: 1;">content</div>
</div>
¡Y aquí hay una columna de tres columnas con una columna central de ancho flexible!
<div style="display: flex;">
<div style="width: 100px;">menu</div>
<div style="flex:1;">content</div>
<div style="width: 100px;">sidebar</div>
</div>
La respuesta aceptada podría funcionar, pero no me gusta la idea de superponer márgenes. En HTML5, harías esto con display: flex; . Es una solución limpia. Simplemente establece el ancho para un elemento y flex-grow: 1; para el elemento dinámico. Una versión editada de Merkuros Fiddle: https://jsfiddle.net/EAEKc/1499/
Los elementos que se flotan se sacan del diseño de flujo normal y los elementos de bloque, como los DIV, ya no abarcan el ancho de su elemento primario. Las reglas cambian en esta situación. En lugar de reinventar la rueda, consulte este sitio para ver algunas soluciones posibles para crear el diseño de dos columnas que está buscando: http://www.maxdesign.com.au/presentation/page_layouts/
Específicamente, el "diseño de dos columnas líquidas".
¡Aclamaciones!
Y basado en la solución de merkuro , si desea maximizar el de la izquierda, debe usar:
<!DOCTYPE html>
<html lang="en">
<head>
<meta "charset="UTF-8" />
<title>Content with Menu</title>
<style>
.content .left {
margin-right: 100px;
background-color: green;
}
.content .right {
float: right;
width: 100px;
background-color: red;
}
</style>
</head>
<body>
<div class="content">
<div class="right">
<p>is</p>
<p>this</p>
<p>what</p>
<p>you are looking for?</p>
</div>
<div class="left">
<p>Hi, Flo!</p>
</div>
</div>
</body>
</html>
No se ha probado en IE, por lo que puede parecer roto en IE.
este uso puede resolver su problema.
width: calc(100% - 100px);
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Content with Menu</title>
<style>
.content .left {
float: left;
width: 100px;
background-color: green;
}
.content .right {
float: left;
width: calc(100% - 100px);
background-color: red;
}
</style>
</head>
<body>
<div class="content">
<div class="left">
<p>Hi, Flo!</p>
</div>
<div class="right">
<p>is</p>
<p>this</p>
<p>what</p>
<p>you are looking for?</p>
</div>
</div>
</body>
</html>
Esta es una solución actualizada para HTML 5 si a alguien le interesa y no le gusta "flotante".
La tabla funciona muy bien en este caso, ya que puede establecer el ancho fijo para la tabla y la celda de la tabla.
.content-container{
display: table;
width: 300px;
}
.content .right{
display: table-cell;
background-color:green;
width: 100px;
}
http://jsfiddle.net/EAEKc/596/ código fuente original de @merkuro