¿Cómo hago flotar dos divs uno al lado del otro sin especificar un ancho?

Tengo dos divs, el primero no tiene mucho contenido y el segundo tiene mucho contenido. Quiero que flote uno al lado del otro, de modo que el primer div sea tan ancho como el texto y el segundo div ocupe la cantidad restante de espacio horizontal. Y, no quiero especificar anchos fijos.¿Cómo hago flotar dos divs uno al lado del otro sin especificar un ancho?

Aquí es el aspecto deseado usando tablas: http://jsfiddle.net/enRkR/

¿Puede esto fácilmente puede hacer con CSS flotadores, o es un diseño de la mesa la única manera de lograr este look?

Fuente

2011-11-11 Nick Clark

Sí, puede hacerlo con CSS & que es un trabajo en todos los navegadores. Hacer como esto:

.right{ 
    overflow:hidden; 
    background:red; 
} 
.left{ 
    float:left; 
    background:green; 
}

Comprobar este ejemplo vivo http://jsfiddle.net/enRkR/8/

Fuente

2011-11-11 04:19:44 sandeep

Gracias! Desbordamiento: oculta era la magia que me faltaba. –

contento de ayudar :) – sandeep

Wow, alucinante. ¿Quién hubiera pensado 'desbordamiento: escondido;' es la respuesta. Si puedo 1000-up esta respuesta lo haría;) ¡Gracias! – pixelfreak

Prueba esto:

<div> 
    <div id="div1" style="float:left"> 
    content 
    </div> 
    <div id="div2" > 
    content 
    </div> 
<div>

refieren esto: How to style Div elements as Tables

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" lang="en-US"> 
<head><title>table using divs</title> 
<style type="text/css"> 
    .div-table{display:table; border:1px solid #003399;} 
    .div-table-caption{display:table-caption; background:#009999;} 
    .div-table-row{display:table-row;} 
    .div-table-col{display:table-cell; padding: 5px; border: 1px solid #003399;} 
</style> 
</head> 
<body> 
<div class="div-table"> 
    <div class="div-table-caption">This is a caption</div> 
    <div class="div-table-row"> 
    <div class="div-table-col">1st Column</div> 
    <div class="div-table-col">2nd Column</div> 
</div> 
</div> 
</body> 
</html>

Nota: Para utilizar estos valores de las propiedades CSS, es necesario tener un navegador web que soporte ellos. Por desgracia, eso se traduce en un número limitado de navegadores como Internet Explorer 8, Firefox 3, Opera 9 y así sucesivamente

Fuente

2011-11-11 04:17:11

<div style="float:left">less content</div> 
<div>More content More content 
</div>

Fuente

2011-11-11 04:19:35 tmjam

¿Cómo hago flotar dos divs uno al lado del otro sin especificar un ancho?

Respuesta

Cuestiones relacionadas