¿Cómo hacer que un div llene un espacio horizontal restante?


419

Tengo 2 divs: uno en el lado izquierdo y otro en el lado derecho de mi página. El que está en el lado izquierdo tiene un ancho fijo y quiero que el del lado derecho llene el espacio restante.

#search {
  width: 160px;
  height: 25px;
  float: left;
  background-color: #ffffff;
}

#navigation {
  width: 780px;
  float: left;
  background-color: #A53030;
}
<div id="search">Text</div>
<div id="navigation">Navigation</div>


11
Elimine la propiedad de ancho y flotante en #navigation y funcionará.
Johan Leino


1
@alexchenco: es posible que desee actualizar su respuesta elegida a la proporcionada por Hank
Adrien Be

@AdrienBe en realidad, si miras la respuesta de mystrdat, creo que esa es aún mejor. Es solo una línea de CSS y es la única que funcionó para mí (estoy haciendo tres columnas con flotante: izquierda; en las dos primeras con anchos fijos y desbordamiento: automático en la última y funciona muy bien)
edwardtyl

@edwardtyl lo suficientemente justo. En realidad, parece usar una técnica similar a la respuesta que proporcioné para stackoverflow.com/questions/4873832/…
Adrien Be

Respuestas:


71

Esto parece lograr lo que busca.

#left {
  float:left;
  width:180px;
  background-color:#ff0000;
}
#right {
  width: 100%;
  background-color:#00FF00;
}
<div>
  <div id="left">
    left
  </div>
  <div id="right">
    right
  </div>
</div>


8
Tienes que eliminar el ancho: 100% en el div derecho para que funcione.
Johan Leino

250
Esta solución realmente tiene un problema. Intenta eliminar el color del elemento IZQUIERDO. Notarás que el color del elemento DERECHO se esconde debajo de él. El contenido parece ir al lugar correcto, pero el div DERECHO en sí no lo es.
Vyrotek

55
+1 también resolvió mi problema. Lo que aprendí fue que necesitaba eliminar "float: left" en el div de relleno. Pensé que eso haría que la página
explotara

12
Quizás sea bueno notar que el comentario de Vyroteks es verdadero, pero se puede resolver con desbordamiento: oculto en la columna derecha. Denzel menciona esto, pero la suya no es la respuesta aceptada, por lo que podría perderse eso ...
Ruudt

45
Esto es simplemente incorrecto, el elemento correcto tiene tamaño completo, solo su contenido flota alrededor del elemento izquierdo. Esto no es una solución, solo más confusión.
mystrdat

268

El problema que encontré con la respuesta de Boushley es que si la columna derecha es más larga que la izquierda, simplemente se ajustará a la izquierda y continuará llenando todo el espacio. Este no es el comportamiento que estaba buscando. Después de buscar a través de muchas 'soluciones', encontré un tutorial (ahora el enlace está muerto) sobre la creación de tres páginas de columna.

El autor ofrece tres formas diferentes, una de ancho fijo, una con tres columnas variables y otra con columnas externas fijas y una anchura media central. Mucho más elegante y efectivo que otros ejemplos que encontré. Mejoró significativamente mi comprensión del diseño CSS.

Básicamente, en el caso simple anterior, flota la primera columna a la izquierda y dale un ancho fijo. Luego dele a la columna de la derecha un margen izquierdo que sea un poco más ancho que la primera columna. Eso es. Hecho. Código de Ala Boushley:

Aquí hay una demostración en Stack Snippets & jsFiddle

#left {
  float: left;
  width: 180px;
}

#right {
  margin-left: 180px;
}

/* just to highlight divs for example*/
#left { background-color: pink; }
#right { background-color: lightgreen;}
<div id="left">  left  </div>
<div id="right"> right </div>

Con el ejemplo de Boushley, la columna izquierda sostiene la otra columna a la derecha. Tan pronto como la columna izquierda termina, la derecha comienza a llenar todo el espacio nuevamente. Aquí la columna derecha simplemente se alinea más en la página y la columna izquierda ocupa su gran margen grueso. No se necesitan interacciones de flujo.


Cuando cierra la etiqueta div, el contenido después de ese div debe mostrarse en una nueva línea, pero eso no está sucediendo. ¿Puedes explicar por qué?
fuddin

debería ser: margin-left: 190px; te olvidaste ';'. También el margen izquierdo debe ser de 180 px.
fuddin

44
Nota: si desea el elemento de ancho fijo a la derecha, asegúrese de colocarlo primero en el código o de todos modos será empujado a la siguiente línea.
Trevor

2
@RoniTovi, los elementos flotantes deben aparecer antes que los no flotantes en su html. jsfiddle.net/CSbbM/127
Hank

66
Entonces, ¿cómo haces esto si quieres evitar un ancho fijo? En otras palabras, ¿permitir que la columna izquierda sea tan ancha como sea necesario y que la columna derecha tome el resto?
Patrick Szalapski

126

La solución proviene de la propiedad de visualización.

Básicamente necesitas hacer que los dos divs actúen como celdas de tabla. Entonces, en lugar de usar float:left, tendrá que usar display:table-cellen ambos divs, y para el div de ancho dinámico también debe establecerlo width:auto;. Los dos div deben colocarse en un contenedor de 100% de ancho con la display:tablepropiedad.

Aquí está el CSS:

.container {display:table;width:100%}
#search {
  width: 160px;
  height: 25px;
  display:table-cell;
  background-color: #FFF;
}
#navigation {
  width: auto;
  display:table-cell;
  /*background-color: url('../images/transparent.png') ;*/
  background-color: #A53030;
}

*html #navigation {float:left;}

Y el HTML:

<div class="container">
   <div id="search"></div>
   <div id="navigation"></div>
</div>

IMPORTANTE: para Internet Explorer, debe especificar la propiedad flotante en el div de ancho dinámico, de lo contrario, el espacio no se rellenará.

Espero que esto resuelva tu problema. Si lo desea, puede leer el artículo completo que escribí sobre esto en mi blog .


3
No funciona cuando el contenido dentro del div con ancho: auto es más grande que el resto del espacio disponible en la ventana gráfica.
Nathan Loyer

44
@einord, esta solución no usa tablas, y soy consciente de que las tablas deben usarse solo para datos tabulares. Entonces, está fuera de contexto aquí. Tablas reales y visualización: las propiedades de la tabla (+ otra variación) son cosas completamente diferentes.
Mihai Frentiu

1
@Mihai Frentiu, ¿en qué formas muestra: la tabla difiere del elemento de la tabla real? Realmente me gustaría aprender esto si son cosas completamente diferentes, gracias. =)
einord

2
@einord, el uso de tablas HTML implica la definición de toda la estructura de la tabla en código HTML. El modelo de tabla CSS le permite hacer que casi cualquier elemento se comporte como un elemento de tabla sin definir todo el árbol de la tabla.
Mihai Frentiu el

1
@Mihai Frentiu, gracias por la respuesta. ¿Pero no es el comportamiento del elemento de la tabla la mitad del problema con el uso de tablas como elementos de diseño?
einord

123

En estos días, debe usar el flexboxmétodo (puede adaptarse a todos los navegadores con un prefijo de navegador).

.container {
    display: flex;
}

.left {
    width: 180px;
}

.right {
    flex-grow: 1;
}

Más información: https://css-tricks.com/snippets/css/a-guide-to-flexbox/


Consulte www.w3schools.com/cssref/css3_pr_flex-grow.asp para obtener una buena explicación del atributo CSS. Una solución moderna simple pero que podría no funcionar en navegadores antiguos.
Edward

44
Flexbox FTW ... He probado todas las otras soluciones en este hilo, nada funciona, pruebo esta solución de flexbox, funciona de inmediato ... CSS clásico (es decir, antes del advenimiento de flexbox y css grid) apesta totalmente en el diseño ... regla flex y grid :-)
leo

Esto debe aceptarse como la solución seleccionada para los tiempos actuales. Además, es la única solución "no pirata".
Greg

Esto funciona como un encanto, el ahorro de mi día!
lisnb

tsbaa (esta debería ser la respuesta aceptada)
Ryo

104

Como esta es una pregunta bastante popular, me inclino a compartir una buena solución usando BFC.
Codepen muestra de lo siguiente aquí .

.left {
  float: left;
  width: 100px;
}
.right {
  overflow: auto;
}

En este caso, overflow: autodesencadena el comportamiento del contexto y hace que el elemento correcto se expanda solo al ancho restante disponible y, naturalmente, se expandirá al ancho completo si .leftdesaparece. Un truco muy útil y limpio para muchos diseños de UI, pero quizás difícil de entender al principio "por qué funciona".


1
Soporte de navegador para desbordamiento. IE4 !!! w3schools.com/cssref/pr_pos_overflow.asp
Yevgeniy Afanasyev

1
A veces termino con una barra de desplazamiento horizontal inútil en el elemento .right. ¿Cuál es el problema allí?
Patrick Szalapski

1
@PatrickSzalapski ¿Puedes hacer un codepen o similar del caso? El desbordamiento autopuede desencadenar eso dependiendo de su contenido. También puede usar cualquier otro valor de desbordamiento para obtener el mismo efecto, hiddenpuede funcionar mejor para su caso.
mystrdat

1
¿Qué significa BFC, y hay un buen tutorial general que explique BFC en la web?
lulalala

1
@lulalala significa contexto de formato de bloque . Aquí hay una explicación
bobo el

23

Si no necesita compatibilidad con versiones anteriores de ciertos navegadores (IE 10 8 o menos, por ejemplo), puede usar la calc()función CSS:

#left {
   float:left;
   width:180px;
   background-color:#ff0000;
}

#right {
   float: left;
   width: calc(100% - 180px);
   background-color:#00FF00;
}

1
IE 9 y versiones posteriores admiten el atributo calc. El único problema con esta solución es que quizás no sepamos el ancho de la columna izquierda o cambie.
Arashsoft

bueno, esta solución puede estar orientada a un caso flexible y suponiendo que no sabe o no le importa el ancho del contenedor principal. En la pregunta, @alexchenco dijo que quería llenar "el espacio restante", así que ... creo que es válido :) y sí, IE 9 también es compatible, gracias por la nota;)
Marcos B.

15

La respuesta de @ Boushley fue la más cercana, sin embargo, hay un problema no abordado que se ha señalado. El div derecho ocupa todo el ancho del navegador; El contenido toma el ancho esperado. Para ver mejor este problema:

<html>
<head>
    <style type="text/css">
    * { margin: 0; padding: 0; }
    body {
        height: 100%;
    }
    #left {
        opacity: 0;
        height: inherit;
        float: left;
        width: 180px;
        background: green;
    }
    #right {
        height: inherit;
        background: orange;
    }
    table {
            width: 100%;
            background: red;
    }
    </style>
</head>
<body>
    <div id="left">
        <p>Left</p>
    </div>
    <div id="right">
        <table><tr><td>Hello, World!</td></tr></table>
    </div>
</body>
</html>

http://jsfiddle.net/79hpS/

El contenido está en el lugar correcto (en Firefox), sin embargo, el ancho es incorrecto. Cuando los elementos secundarios comienzan a heredar el ancho (por ejemplo, la tabla con width: 100%) se les da un ancho igual al del navegador, lo que hace que se desborden a la derecha de la página y creen una barra de desplazamiento horizontal (en Firefox) o que no floten y se empujen hacia abajo ( en cromo).

Puede solucionar esto fácilmente agregando overflow: hiddena la columna derecha. Esto le brinda el ancho correcto tanto para el contenido como para el div. Además, la tabla recibirá el ancho correcto y completará el ancho restante disponible.

Probé algunas de las otras soluciones anteriores, no funcionaron completamente con ciertos casos extremos y fueron demasiado intrincados para justificar su reparación. Esto funciona y es simple.

Si hay algún problema o inquietud, no dude en plantearlos.


1
overflow: hiddende hecho arregla esto, gracias. (La respuesta marcada es incorrecta, por cierto, ya que en rightrealidad ocupa todo el espacio disponible en el padre, puede ver esto en todos los navegadores al inspeccionar elementos)
huysentruitw

1
¿Alguien puede explicar por qué esto funciona exactamente? Sé que he visto una buena explicación en algún lugar aquí, pero parece que no puedo encontrarla.
tomswift

2
La configuración @tomswift overflow: hiddencoloca la columna derecha en su propio contexto de formato de bloque. Los elementos de bloque ocupan todo el espacio horizontal disponible para ellos. Ver: developer.mozilla.org/en-US/docs/Web/Guide/CSS/…
John Kurlak

El overflow:xxxatributo es la clave. Como dices, se detiene #rightde expandirse debajo #left. Resuelve muy bien un problema que estaba teniendo usando jQuery UI redimensionable: con un #rightconjunto con un atributo de desbordamiento y #leftconfigurado como redimensionable, tiene un límite móvil simple. Ver jsfiddle.net/kmbro/khr77h0t .
kbro

13

Aquí hay una pequeña solución para la solución aceptada, que evita que la columna derecha caiga debajo de la columna izquierda. Reemplazado width: 100%;con overflow: hidden;una solución difícil, si alguien no lo sabía.

<html>

<head>
    <title>This is My Page's Title</title>
    <style type="text/css">
        #left {
            float: left;
            width: 180px;
            background-color: #ff0000;
        }
        #right {
            overflow: hidden;
            background-color: #00FF00;
        }
    </style>
</head>

<body>
    <div>
        <div id="left">
            left
        </div>
        <div id="right">


right
    </div>
</div>

http://jsfiddle.net/MHeqG/2600/

[editar] Consulte también un ejemplo para el diseño de tres columnas: http://jsfiddle.net/MHeqG/3148/


1
Solución perfecta para barra de navegación flexible con logotipo fijo.
Tronco

5

Si está tratando de llenar el espacio restante en una caja flexible entre 2 elementos, agregue la siguiente clase a un div vacío entre los 2 que desea separar:

.fill {
  // This fills the remaining space, by using flexbox. 
  flex: 1 1 auto;
}

4

Utilizar display:flex

<div style="width:500px; display:flex">
   <div style="width:150px; height:30px; background:red">fixed width</div>

   <div style="width:100%; height:30px; background:green">remaining</div>
</div>

1
Esta respuesta duplica la respuesta de Jordan de 2014.
TylerH

3

La respuesta de Boushley parece ser la mejor manera de organizar esto mediante flotadores. Sin embargo, no está exento de problemas. La flotación anidada dentro del elemento expandido no estará disponible para usted; Romperá la página.

El método que se muestra básicamente "lo simula" cuando se trata del elemento en expansión: en realidad no está flotando, solo está jugando junto con los elementos flotantes de ancho fijo usando sus márgenes.

El problema es exactamente eso: el elemento desplegable no está flotando. Si intenta y tiene algún elemento flotante anidado dentro del elemento desplegable, esos elementos flotantes "anidados" no están realmente anidados; cuando intentas pegar clear: both;debajo de tus elementos flotantes "anidados", terminarás limpiando también los flotadores de nivel superior.

Luego, para usar la solución de Boushley, me gustaría agregar que debe colocar un div como el siguiente: .fakeFloat {height: 100%; ancho: 100%; flotador izquierdo; } y coloque esto directamente dentro del div expandido; todos los contenidos del div expandido deberían ir dentro de este elemento fakeFloat.

Por esta razón, recomendaría usar tablas en este caso específico. Los elementos flotantes realmente no están diseñados para hacer la expansión que desea, mientras que la solución usando una tabla es trivial. En general, se argumenta que la flotación es más adecuada para los diseños, no para las tablas ... pero de todos modos no está usando la flotación, lo está fingiendo, y eso de alguna manera frustra el propósito del argumento estilístico para este caso específico, en mi humilde opinión.


No use tablas para el diseño. No puedes establecer su altura. Se expanden para mantener su contenido y no respetan el desbordamiento.
kbro

@kbro: no use tablas para el diseño porque el contenido y la visualización deben mantenerse separados. Pero si el contenido está estructurado como una tabla, ciertamente se puede recortar overflow: hidden. jsfiddle.net/dave2/a5jbpc85
Dave

3

Probé las soluciones anteriores para un líquido a la izquierda, y un derecho fijo, pero ninguno funcionó (soy consciente de que la pregunta es a la inversa, pero creo que esto es relevante). Esto es lo que funcionó:

.wrapper {margin-right:150px;}
.wrapper .left {float:left; width:100%; margin-right:-150px;}

.right {float:right; width:150px;}

<div class="wrapper"><div class="left"></div></div>
<div class="right"></div>

3

Tuve un problema similar y encontré la solución aquí: https://stackoverflow.com/a/16909141/3934886

La solución es para un div de centro fijo y columnas laterales líquidas.

.center{
    background:#ddd;
    width: 500px;
    float:left;
}

.left{
    background:#999;
    width: calc(50% - 250px);
    float:left;
}

.right{
    background:#999;
    width: calc(50% - 250px);
    float:right;
}

Si desea una columna izquierda fija, simplemente cambie la fórmula en consecuencia.


No disponible en algunos navegadores antiguos como IE8 y solo parcialmente en IE9 ( caniuse.com/#feat=calc )
landi

2

Puede utilizar las propiedades de Grid CSS, es la forma más clara, limpia e intuitiva de estructurar sus cuadros.

#container{
    display: grid;
    grid-template-columns: 100px auto;
    color:white;
}
#fixed{
  background: red;
  grid-column: 1;
}
#remaining{
  background: green;
  grid-column: 2;
}
<div id="container">
  <div id="fixed">Fixed</div>
  <div id="remaining">Remaining</div>
</div>


1

Me pregunto que nadie usa position: absoluteconposition: relative

Entonces, otra solución sería:

HTML

<header>
  <div id="left"><input type="text"></div>
  <div id="right">Menu1 Menu2 Menu3</div>
</header>

CSS

header { position: relative;  }
#left {
    width: 160px;
    height: 25px;
}
#right {
    position: absolute;
    top: 0px;
    left: 160px;
    right: 0px;
    height: 25px;
}

Jsfiddle ejemplo


0

/ * * css * /

#search {
 position: absolute;
 width: 100px;
}
.right-wrapper {
  display: table;
  width: 100%;
  padding-left:100px;
}
.right-wrapper #navigation {
 display: table-cell;
 background-color: #A53030;
}

/ * * html * /

<div id="search"></div>
<div class="right-wrapper">
   <div id="navigation"></div>
</div>

0

¡Tengo una solución muy simple para esto! // HTML

<div>
<div id="left">
    left
</div>
<div id="right">
    right
</div>

// CSS

#left {
float:left;
width:50%;
position:relative;
background-color:red;
}
#right {
position:relative;
background-color:#00FF00;}

Enlace: http://jsfiddle.net/MHeqG/


0

Tuve un problema similar y se me ocurrió lo siguiente que funcionó bien

CSS:

.top {
width: auto;
height: 100px;
background-color: black;
border: solid 2px purple;
overflow: hidden;
}
.left {
float:left;
width:100px;
background-color:#ff0000;
padding: 10px;
border: solid 2px black;
}
.right {
width: auto;
background-color:#00FF00;
padding: 10px;
border: solid 2px orange;
overflow: hidden;
}
.content {
margin: auto;
width: 300px;
min-height: 300px;
padding: 10px;
border: dotted 2px gray;
}

HTML:

<div class=top>top </div>
<div>
    <div class="left">left </div>
    <div class="right">
        <div class="content">right </div>
    </div>
</div>

Este método no se ajustará cuando la ventana se reduzca, pero expandirá automáticamente el área de 'contenido'. Mantendrá un ancho estático para el menú del sitio (izquierda).

Y para la demostración de cuadro de contenido de expansión automática y cuadro vertical izquierdo (menú del sitio):

https://jsfiddle.net/tidan/332a6qte/


0

Trate de añadir posición relative, retire widthy floatpropiedades del lado derecho, a continuación, añadir lefty rightpropiedad con 0valor.

Además, puede agregar una margin leftregla con el valor basado en el ancho del elemento izquierdo (+ algunos píxeles si necesita espacio intermedio) para mantener su posición.

Este ejemplo me está funcionando:

   #search {
        width: 160px;
        height: 25px;
        float: left;
        background-color: #FFF;
    }

    #navigation {  
        display: block;  
        position: relative;
        left: 0;
        right: 0;
        margin: 0 0 0 166px;             
        background-color: #A53030;
    }

0

.container {
  width:100%;
  display:table;
  vertical-align:middle;
}

.left {
  width:100%;
  display:table-cell;
  text-align:center;
}

.right {
  width:40px;
  height:40px;
  display:table-cell;
  float:right;
}
<div class="container">
  <div class="left">Left</div>
  <div class="right">Right</div>
</div

Prueba esto. Funcionó para mi.


0

He estado trabajando en este problema durante dos días y tengo una solución que puede funcionar para usted y para cualquier otra persona que intente hacer un ancho fijo receptivo a la izquierda y que el lado derecho llene el resto de la pantalla sin envolver el lado izquierdo. Supongo que la intención es hacer que la página responda tanto en navegadores como en dispositivos móviles.

Aquí está el código

// Fix the width of the right side to cover the screen when resized
$thePageRefreshed = true;
// The delay time below is needed to insure that the resize happens after the window resize event fires
// In addition the show() helps.  Without this delay the right div may go off screen when browser is refreshed 
setTimeout(function(){
    fixRightSideWidth();
    $('.right_content_container').show(600);
}, 50);

// Capture the window resize event (only fires when you resize the browser).
$( window ).resize(function() {
    fixRightSideWidth();
});

function fixRightSideWidth(){
    $blockWrap = 300; // Point at which you allow the right div to drop below the top div
    $normalRightResize = $( window ).width() - $('.left_navigator_items').width() - 20; // The -20 forces the right block to fall below the left
    if( ($normalRightResize >= $blockWrap) || $thePageRefreshed == true ){
        $('.right_content_container').width( $normalRightResize );
        $('.right_content_container').css("padding-left","0px");
        
        /* Begin test lines these can be deleted */
        $rightrightPosition = $('.right_content_container').css("right");
        $rightleftPosition = $('.right_content_container').css("left");
        $rightwidthPosition = $('.right_content_container').css("width");
        $(".top_title").html('window width: '+$( window ).width()+"&nbsp;"+'width: '+$rightwidthPosition+"&nbsp;"+'right: '+$rightrightPosition);
        /* End test lines these can be deleted */
    
    
    }
    else{
        if( $('.right_content_container').width() > 300 ){
            $('.right_content_container').width(300);
        }
        
        /* Begin test lines these can be deleted */
        $rightrightPosition = $('.right_content_container').css("right");
        $rightleftPosition = $('.right_content_container').css("left");
        $rightwidthPosition = $('.right_content_container').css("width");
        $(".top_title").html('window width: '+$( window ).width()+"&nbsp;"+'width: '+$rightwidthPosition+"&nbsp;"+'right: '+$rightrightPosition);
        /* End test lines these can be deleted */
    
    }
    if( $thePageRefreshed == true ){
        $thePageRefreshed = false;
    }
}
/* NOTE: The html and body settings are needed for full functionality
and they are ignored by jsfiddle so create this exapmle on your web site
*/
html {
    min-width: 310px;
    background: #333;
    min-height:100vh;
}

body{
	background: #333;
	background-color: #333;
	color: white;
    min-height:100vh;
}

.top_title{
  background-color: blue;
  text-align: center;
}

.bottom_content{
	border: 0px;
	height: 100%;
}

.left_right_container * {
    position: relative;
    margin: 0px;
    padding: 0px;
    background: #333 !important;
    background-color: #333 !important;
    display:inline-block;
    text-shadow: none;
    text-transform: none;
    letter-spacing: normal;
    font-size: 14px;
    font-weight: 400;
    font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;
    border-radius: 0;
    box-sizing: content-box;
    transition: none;
}

.left_navigator_item{
	display:inline-block;
	margin-right: 5px;
	margin-bottom: 0px !important;
	width: 100%;
	min-height: 20px !important;
	text-align:center !important;
	margin: 0px;
	padding-top: 3px;
	padding-bottom: 3px;
	vertical-align: top;
}

.left_navigator_items {
    float: left;
    width: 150px;
}

.right_content_container{
    float: right;
    overflow: visible!important;
    width:95%; /* width don't matter jqoery overwrites on refresh */
    display:none;
    right:0px;
}

.span_text{
	background: #eee !important;
	background-color: #eee !important;
	color: black !important;
	padding: 5px;
	margin: 0px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div class="top_title">Test Title</div>
<div class="bottom_content">
    <div class="left_right_container">
        <div class="left_navigator_items">
            <div class="left_navigator_item">Dashboard</div>
            <div class="left_navigator_item">Calendar</div>
            <div class="left_navigator_item">Calendar Validator</div>
            <div class="left_navigator_item">Bulletin Board Slide Editor</div>
            <div class="left_navigator_item">Bulletin Board Slide Show (Live)</div>
            <div class="left_navigator_item">TV Guide</div>
        </div>
        <div class="right_content_container">
            <div class="span_text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ullamcorper maximus tellus a commodo. Fusce posuere at nisi in venenatis. Sed posuere dui sapien, sit amet facilisis purus maximus sit amet. Proin luctus lectus nec rutrum accumsan. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Ut fermentum lectus consectetur sapien tempus molestie. Donec bibendum pulvinar purus, ac aliquet est commodo sit amet. Duis vel euismod mauris, eu congue ex. In vel arcu vel sem lobortis posuere. Cras in nisi nec urna blandit porta at et nunc. Morbi laoreet consectetur odio ultricies ullamcorper. Suspendisse potenti. Nulla facilisi.

Quisque cursus lobortis molestie. Aliquam ut scelerisque leo. Integer sed sodales lectus, eget varius odio. Nullam nec dapibus lorem. Aenean a mattis velit, ut porta nunc. Phasellus aliquam volutpat molestie. Aliquam tristique purus neque, vitae interdum ante aliquam ut.

Pellentesque quis finibus velit. Fusce ac pulvinar est, in placerat sem. Suspendisse nec nunc id nunc vestibulum hendrerit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Mauris id lectus dapibus, tempor nunc non, bibendum nisl. Proin euismod, erat nec aliquet mollis, erat metus convallis nulla, eu tincidunt eros erat a lectus. Vivamus sed mattis neque. In vitae pellentesque mauris. Ut aliquet auctor vulputate. Duis eleifend tincidunt gravida. Sed tincidunt blandit tempor.

Duis pharetra, elit id aliquam placerat, nunc arcu interdum neque, ac luctus odio felis vitae magna. Curabitur commodo finibus suscipit. Maecenas ut risus eget nisl vehicula feugiat. Sed sed bibendum justo. Curabitur in laoreet dolor. Suspendisse eget ligula ac neque ullamcorper blandit. Phasellus sit amet ultricies tellus.

In fringilla, augue sed fringilla accumsan, orci eros laoreet urna, vel aliquam ex nulla in eros. Quisque aliquet nisl et scelerisque vehicula. Curabitur facilisis, nisi non maximus facilisis, augue erat gravida nunc, in tempus massa diam id dolor. Suspendisse dapibus leo vel pretium ultrices. Sed finibus dolor est, sit amet pharetra quam dapibus fermentum. Ut nec risus pharetra, convallis nisl nec, tempor nisl. Vivamus sit amet quam quis dolor dapibus maximus. Suspendisse accumsan sagittis ligula, ut ultricies nisi feugiat pretium. Cras aliquam velit eu venenatis accumsan. Integer imperdiet, eros sit amet dignissim volutpat, tortor enim varius turpis, vel viverra ante mauris at felis. Mauris sed accumsan sapien. Interdum et malesuada fames ac ante ipsum primis in faucibus. Ut vel magna commodo, facilisis turpis eu, semper mi. Nulla massa risus, bibendum a magna molestie, gravida maximus nunc.</div>
        </div>
    </div>
</div>

Aquí está mi violín que puede funcionar para usted como lo hizo para mí. https://jsfiddle.net/Larry_Robertson/62LLjapm/


0

Reglas para artículos y contenedores;

Container: {*** display: table; ***}
Items: {*** display: table-cell; width: 100%; ***}

Utilice el espacio en blanco: nowrap; para textos en los últimos ítems por su desestructuración.

Artículo X% | Artículo Y% | Artículo Z%

¡Longitud total siempre = 100%!

Si

Item X=50%
Item Y=10%
Item z=20%

entonces

Artículo X = 70%

¡El elemento X es dominante (los primeros elementos son dominantes en el diseño CSS de la tabla)!

Prueba max-content; propiedad para div dentro para difundir div en contenedor:

div[class="item"] {
...
  width: -webkit-max-content;
  width: -moz-max-content;
  width: max-content;
...

}


0

La solución más fácil es usar margen. ¡Esto también responderá!

<div style="margin-right: auto">left</div>
<div style="margin-left: auto; margin-right:auto">center</div>
<div style="margin-left: auto">right</div>

0

La solución más simple es hacer que el ancho del div izquierdo sea igual al 100%, el ancho del div derecho más cualquier margen entre ellos.

<div class="cont">
  <div class="search">
    Big Logo Text
  </div>
  <nav>
    <ul class="navbar">
      <li><a href="#1">NavLink1</a></li>
      <li><a href="#2">NavLink2</a></li>
      <li><a href="#3">NavLink3</a></li>
      <li><a href="#4">NavLink4</a></li>
      <li><a href="#5">NavLink5</a></li>
    </ul>
  </nav>
</div>

.cont{
  display: inline-grid;
  grid-template-columns: 160px 10px calc(100% - 170px);
  grid-template-rows: auto;
  grid-template-areas: "search .  navigation";
  width: 100%;
  height: auto;
  text-align: center;
}

.search {
  grid-area: search;
  height: 90px;
  background-color: #00FF00;
  line-height: 80px;
  font-size: 1.4rem;
  font-weight: 600;
}
nav {
  grid-area: navigation;
  height: 90px;
  background-color: #A53030;
}

.navbar{
  display: flex;
  height: 30px;
  width: 100%;
  padding: 0%;
  list-style-type: none;
  flex-flow: row wrap;
  flex: 0 1 auto;
  justify-content: space-between;
  align-content: flex-start;
  align-items: flex-start;
}

.navbar a{
    outline: 0;
    text-decoration: none;
}

https://codepen.io/tamjk/pen/dybqKBN


-2

Me encontré con este mismo problema tratando de diseñar algunos controles jqueryUI . Aunque la filosofía común ahora es "usar en DIVlugar de TABLE", descubrí que en mi caso usar TABLE funcionó mucho mejor. En particular, si necesita tener una alineación directa dentro de los dos elementos (por ejemplo, centrado vertical, centrado horizontal, etc.), las opciones disponibles con TABLE proporcionan controles simples e intuitivos para esto.

Aquí está mi solución:

<html>
<head>
  <title>Sample solution for fixed left, variable right layout</title>
  <style type="text/css">
    #controls {
      width: 100%;
    }
    #RightSide {
      background-color:green;
    }
  </style>
</head>

<body>
<div id="controls">
  <table border="0" cellspacing="2" cellpadding="0">
    <TR>
      <TD>
        <button>
FixedWidth
        </button>
      </TD>
      <TD width="99%" ALIGN="CENTER">
        <div id="RightSide">Right</div>
      </TD>
    </TR>
  </table>
</div>
</body>
</html>

99
Nunca, nunca, debe usar tablas para formatear cualquier cosa que no sean datos tabulares. SIEMPRE.
mmmeff

1
El problema con las tablas es que el marcado será engañoso si lo que está tratando de mostrar no pretende ser datos tabulares. Si elige a descuidar el principio de significado la realización de marcado, se puede así volver a <font>, <b>, etc. HTML evolucionada pasado que centrarse menos en la presentación.
Vilinkameni

44
No sé por qué todos se asustan con las mesas. A veces son útiles.
Jandieg

No puedes arreglar la altura de una mesa. Si el contenido se hace más grande, también lo hace la tabla. Y no honra overflow.
kbro

@Jandieg: vea la respuesta de Mihai Frentiu para una explicación. Todo el propósito de CSS es separar el contenido de la apariencia. Usar propiedades como display:tablepara lograr la apariencia deseada de los datos no tabulares está limpio. Forzar datos no tabulares como columnas de página o controles de formulario en tablas HTML para controlar el diseño no está limpio.
Dave
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.