Dos columnas div. Ancho dinámico de uno

Question

Lo que estoy tratando de lograr, es llegar a divs, uno al lado del otro. Uno sería el menú, de 150 píxeles de ancho, a la izquierda de la pantalla, y el segundo, debería llenar el resto del contenedor.

eso es lo que ocurrió: http://jsfiddle.net/Ln49F/3/

embargo, el div lidiar también es "bajo" del menú, y trabajar con texto, moverlo a la derecha un poco es imposible. ¿Es posible, de alguna manera, hacer que el "contenido" div sea ancho para "100% - 150px" y se coloque al lado del menú div?

Para lograr algo así: http://jsfiddle.net/Ln49F/4/ flotador izquierda, pone el div "al lado de" div menú, y el relleno funciona bien, pero no sé cómo hacer que sea amplia para el resto del contenedor div.

Answer 1

Sacar la width:100% (acaba de salir a auto, que es por defecto) y utilizar esto:

div.content{ 
    margin-left:150px; 
    background: green;   
} 

jsfiddle.

Answer 2

escribe así:

CSS

.wrapper{ 
    overflow:hidden; 
    padding-bottom:10px; 
} 
.first{ 
    float:left; 
    height:200px; 
    width:150px; 
    background:red; 
} 
.second{ 
    overflow:hidden; 
    height:200px; 
    background:green; 
} 

HTML

<div class="wrapper"> 
    <div class="first">first</div> 
    <div class="second">second</div> 
</div> 

Marque esta http://jsfiddle.net/TbRuB/10/

O

También puede lograr esto con display:table propiedad pero es trabajo hasta IE8 & anteriormente.

Marque esta http://jsfiddle.net/TbRuB/12/

Answer 3

Comprobar this fiddle a cabo. Básicamente, usando box-sizing, algo de relleno y un margen negativo, puede alinear los dos elementos hasta la parte superior de su contenedor. y hacer que el cuadro de contenido estire la extensión de su elemento principal.

Answer 4

div.container{ 
width: 90%; 
background: red; 
    display: inline-block;  
} 

div.menu{ 
width: 150px; 
float: left; 
background: blue; 
display: inline;  
} 

div.content{ 
    display: inline; 
    float: left; 
    width: 65%; 
    background: green; 
    padding-left: 20px;  
} 

look at this

espero que esto ayude a

Answer 5

Puede ver su primer violín, pero actualizado para trabajar de acuerdo a sus especificaciones, aquí: http://jsfiddle.net/ramsesoriginal/Ln49F/12/

Esto funciona mediante la especificación de la margen derecha en el segundo div, y simplemente dejando el ancho en automático.

los HTMLis sin cambios:

<div class="container"> 
    <div class="menu">Menu to the left</div> 
    <div class="content">Content of site<br>x<br><br><br><br><br></div> 
</div> 

Y la CSS es bastante similar a la suya:

div.container{ 
     width: 90%; 
     height: 150px; 
     background: red;   
    } 

    div.menu{ 
     width: 150px; 
     height: 100px; 
     float: left; 
     background: blue;   
    } 

    div.content{ 
     margin-left: 150px; 
     background: green;   
    } 

me quitó el width: 100%; de div.content y lo reemplazó con margin-left: 150px; Como se puede ver, casi lo hizo bien!

EDIT: BONUS: (falso) Columnas de igual altura!

Actualicé el violín con un código para crear "faux columns" con CSS3, por lo que parece que ambos divs se expanden hasta la parte inferior del contenedor. Puede verlo aquí: http://jsfiddle.net/ramsesoriginal/Ln49F/13/ No sé si realmente lo necesita, pero es un requisito común para este tipo de escenarios.

simplemente he colocado un gradiente de fondo en el envase, con una sola parada difícil en el medio:

background: linear-gradient(left, blue 150px, green 150px); 

Y luego ampliadas que con diferentes prefijos de proveedores:

background: -moz-linear-gradient(left, blue 150px, green 150px); /* FF3.6+ */ 
background: -webkit-gradient(linear, left top, right top, color-stop(150px,blue), color-stop(150px,green)); /* Chrome,Safari4+ */ 
background: -webkit-linear-gradient(left, blue 150px, green 150px); /* Chrome10+,Safari5.1+ */ 
background: -o-linear-gradient(left, blue 150px, green 150px); /* Opera 11.10+ */ 
background: -ms-linear-gradient(left, blue 150px, green 150px); /* IE10+ */ 
background: linear-gradient(left, blue 150px, green 150px); /* W3C */ 

I don' ¡Sé si lo necesitas, pero a veces esto puede ser muy útil!

Answer 6

Uso solución simple

<div class="container"> 
<div class="menu">Menu to the left</div> 
<div class="content">Content of site<br>x<br><br><br><br><br></div> 
</div> 

div.container{ 
width: 90%; 
height: 150px; 
background: red;   
} 

div.menu{ 
width: 150px; 
height: 100px; 
float: left; 
background: blue;   
} 

div.content{ 
background: green;   
margin-left: 150px; 
} 

http://jsfiddle.net/thirtydot/Ln49F/16/