css - tamaño - div responsive

xHTML/CSS: Cómo hacer que div interno obtenga un ancho del 100% menos otro ancho de div

Question

Tengo 2 divs anidados dentro de uno externo, que tiene ancho: 100%. Ambos divs anidados deben estar en una línea y primero deben obtener el tamaño de su contenido:

<div id="#outer" style="width:100%; border:1px">
  <div id="#inner1" style="border:1px; display:inline">
    inner div 1. Some text...
  </div>
  <div id="#inner2" style="width:100%????; border:1px; display:inline">
    inner div 2...
  </div>
</div>

La pregunta es cómo hacer # inner2 div para obtener el resto del espacio horizontal si el ancho del div # inner1 no se especifica y depende de lo que está dentro?

PD: todos los estilos están en clases separadas en mi caso, aquí puse CSS en los atributos de estilo solo para simplificar.

Quiero que el resultado funcione en IE7 + y FF 3.6

En más detalles para mí, se ve así:

 <style type="text/css">
.captionText
{
 float:left;
} 

.captionLine
{
 height: 1px;
 background-color:black;
 margin: 0px;
 margin-left: 5px;
 margin-top: 5px;
 border: 0px;
 padding: 0px;
 padding-top: 1px;
}
 </style>
<table style="width:300px;">
<caption width="100%">
     <div class="captionText">Some text</div>
     <div class="captionLine"> </div>
</caption>
     <tr>
           <td>something</td>
     </tr>
</table>

Aquí está la imagen de lo que quiero:

Answer 1

¡La respuesta es realmente simple! Si ha fijado div (menú) en el lado izquierdo, proporcione flotador div fijo : a la izquierda y su margen de div flexible a la derecha , a la izquierda que es más grande que el ancho del primer div fijo.

Answer 2

Ampliando la respuesta de @Nasser Hajloo, esto funciona para mí (incluso en IE6)

 <div style="width: 400px; border: solid 1px red;"> 
     <span style="float:left;width: auto;border: solid 1px black;"> 
            hey you 
     </span> 
     <div style="display:inline-block;margin: 0px 2px;border: solid 1px black;">always use proper tools.</div> 
 </div> 

Pruébalo con el div principal más pequeño que 400px para ver cómo se ajusta. (También funciona con divs en lugar de tramos: la clave es el ancho: auto en el primer div / span).

Answer 3

Desde su código, parece que está tratando de obtener una línea horizontal para llenar el espacio vacío en su div. Si estoy en lo correcto, busca crear un efecto visual con marcado. Corrígeme si estoy equivocado.

(Sería bueno ver una imagen de lo que quieres)

Ejemplo:

Title ---------------------------

or

Title: Caption ------------------

Esta no es la mejor práctica. Deberías intentar obtener este efecto con CSS.

Intenta hacer que tu código sea más semántico en primer lugar:

<div id="#outer" style="width:100%; border:1px">
  <h3 style="border:1px; display:inline">
    Caption
  </h3>
</div>

Para obtener la línea:

1. crea una imagen con el color que quieras
2. hacer que su altura sea la misma que la que desea que sea la línea en px
3. posicionarlo con la propiedad de background

.

#outer h3 {
display: inline;
background-color: #000;
color: #FFF;
}

#outer {
width: 100%; /* is the default of block element but just for celerity */
background: #000 url(''image path'') center left; /* position the image */
}

Answer 4

El misterioso overflow: hidden; es tu amigo aquí Impide que los elementos adyacentes a los flotadores se extiendan por detrás del flotador. Creo que ese es el diseño que está buscando.

Aquí hay un poco de HTML editado: no creo que puedas tener # caracteres en tu id :

<div id="outer">
    <div id="inner1">
        inner div 1. Some text...
    </div>
    <div id="inner2">
        inner div 2...
    </div>
</div>

Y aquí está el CSS para lograr el diseño que desea.

(Puse CSS adicional para IE 6 con comentarios condicionales de HTML. Me di cuenta de que en realidad no necesitabas que funcionara también en IE 6, pero si te apetece ser amable con los usuarios de IE 6 ...)

<style type="text/css">
#outer {
    overflow: hidden;/* Makes #outer contain its floated children */
    width: 100%;

    /* Colours and borders for illustration purposes */
    border: solid 3px #666;
    background: #ddd;
}

#inner1 {
    float: left;/* Make this div as wide as its contents */

    /* Colours and borders for illustration purposes */
    border: solid 3px #c00;
    background: #fdd;
}

#inner2 {
    overflow: hidden;/* Make this div take up the rest of the horizontal space, and no more */

    /* Colours and borders for illustration purposes */
    border: solid 3px #00c;
    background: #ddf;
}
</style>

<!--[if lte IE 6]>
<style type="text/css">
#inner2 {
    zoom: 1;/* Make this div take up the rest of the horizontal space, and no more, in IE 6 */
}

#inner1 {
    margin-right: -3px;/* Fix the 3-pixel gap that the previous rule introduces. (Shit like this is why web developers hate IE 6.) */
}
</style>
<![endif]-->

Probado y trabajando en IE 6, 7 y 8; Firefox 3.5; y Chrome 4.

Answer 5

Intenta esto: anida inner1 dentro de inner2 , y elimina la display:inline from inner2 , así:

<div id="#outer" style="width:100%; border:1px solid red">
  <div id="#inner2" style="width:100%; border:1px solid black;">
     <div id="#inner1" style="border:1px solid blue; display:inline">
      inner div 1. Some text...
     </div>
  inner div 2...
  </div>
</div>

Puedes verlo trabajando aquí: http://jsbin.com/adiwi

Answer 6

Necesitarías flotar el div interno1 a la izquierda, así:

<div id="#outer" ....>
    <div id=''#inner1" style="float:left; border: 1px solid #000;">
        blabla
    </div>
    <div id="#inner2" style="... DON''T USE WIDTH AND DISPLAY HERE! ...">
        gnihihi
    </div>
</div>

Esto debería funcionar. ¡Echale un vistazo! adiós

Answer 7

No necesita usar div para elementos anidados, solo use SPAN como este

 <div>
     <span style="display:inline-block;width: auto;border: solid 1px black;">
            hey you
     </span>
     <span style="display:inline-block;marging: 0px 2px;border: solid 1px black;">
           always use proper tools.
     </span>
 </div>

Answer 8

Otra solución es ejecutar un javascript que cambie el tamaño de la clase captionLine cuando el documento se haya cargado así.
Tomó algo de tiempo para hacerlo funcionar bajo IE8, no ha probado IE7 pero debería funcionar.
2 cosas para notar

1. IE no es compatible con getElementsByClassName, por lo que esta función se reescribe.
2. IE maneja los márgenes de manera diferente cuando los objetos se cambian de tamaño y se mueven con style.marginLeft, de alguna manera IE parece mantener el margen en la declaración de clase y lo agrega al nuevo style.margin.

<body onload="resizeCaptionLine()">
<style>
caption {
 border: 1px solid blue;
 padding: 0px;
}
.captionText {
 border: 1px solid red;
 float: left;
}
.captionLine {
 background-color:black;
 margin: 0px;
 margin: 5px 0px 0px 5px;
 border: 0px;
 padding: 0px;
 padding-top: 1px;
}
</style>

<table style="width:300px;">
<caption width="100%" name="caption1">
     <div class="captionText">Some text</div>
     <div class="captionLine"> </div>
</caption>
     <tr>
           <td>something</td>
     </tr>
</table>
<table style="width:300px;">
<caption width="100%" name="caption2">
     <div class="captionText">Some text</div>
     <div class="captionLine"> </div>
</caption>
     <tr>
           <td>something</td>
     </tr>
</table>

<script type="text/javascript">

function getElementsByClassName(node, class_name) {
  elems = node.all || node.getElementsByTagName(''*'');
  var arr = new Array();
  for(j = 0; j < elems.length; j++)
  {
    if (elems[j].className == class_name)
       arr[arr.length] = elems[j];
  }
  return arr;
}

function resizeCaptionLine()
{
 var elems = getElementsByClassName(document, ''captionLine'');
 for(i = 0; i < elems.length ; i++)
 {
   var parent = elems[i].parentNode;
   var sibling = getElementsByClassName(parent, ''captionText'');
   var width = parent.offsetWidth - sibling[0].offsetWidth;

    if(elems[i].currentStyle)
   {
     var currentMargin = elems[i].currentStyle.marginLeft;
     var margin = parseInt(currentMargin.substr(0,currentMargin.length-2));
     elems[i].style.marginLeft = (sibling[0].offsetWidth) + "px";
   }
   else if (document.defaultView && document.defaultView.getComputedStyle)
   {
     var currentStyle = document.defaultView.getComputedStyle(elems[i], '''');
     var currentMargin = currentStyle.marginLeft;
     var margin = parseInt(currentMargin.substr(0,currentMargin.length-2));
     elems[i].style.marginLeft = (sibling[0].offsetWidth + margin) + "px";
   }
   else
   {
     var currentMargin = elems[i].style.marginLeft;
     var margin = parseInt(currentMargin.substr(0,currentMargin.length-2));
     elems[i].style.marginLeft = (sibling[0].offsetWidth) + "px";
   }
   elems[i].style.width = (width - margin)+"px";
 } 
}
</script>
</body>

Answer 9

Si estás leyendo esto ahora, probablemente puedas usar calc , así que sé agradecido.

HTML

<div class="universe">
  <div class="somewidth">
  </div>
  <div class="everythingelse">
  </div>
</div>

CSS

.universe {
  width: 100%;
  height: 100%;
}

.somewidth {
  width: 200px;
  height: 100%;
}

.everythingelse {
  width: 800px; /* fallback for emergencies */
  width: calc(100% - 200px);
  width: -moz-calc(100% - 200px);
  width: -webkit-calc(100% - 200px);
  height: 100%;
}

Vea el ejemplo de trabajo en JSFiddle .

Answer 10

Su primer problema es que está prefijando sus identificadores con un ''#''. El # se usa solo en CSS para referirse al elemento con esa identificación, por ejemplo, la regla CSS #outer {ancho: 100%} se refiere a su elemento:

<div id="outer"></div>

Además, no es necesario utilizar ancho en div (o cualquier otro elemento de bloque) que no estén flotantes, ya que ocupan automáticamente el 100% del ancho disponible.

Si desea que los 2 DIV aparezcan en la misma línea, debe flotar el primero a la izquierda. El DIV adyacente aparecerá en el lateral, de nuevo no es necesario especificar el ancho para el segundo elemento. Aquí está su ejemplo completo que incluye un borde de color diferente para cada div.

He hecho los bordes más grandes para que pueda ver qué está pasando.

<html><body>
<style type="text/css">
#outer {
    border: solid 5px #c00;
}
#inner1 {
    border: solid 5px #0c0;
    float: left;
    width: 200px;
    height: 300px;
}
#inner2 {
    border: solid 5px #00c;
    height: 300px;
    margin-left: 210px; /* 200px left width + 2 x 5px borders */
}
</style>

<div id="outer">
  <div id="inner1">
    inner div 1. Some text...
  </div>
  <div id="inner2">
    inner div 2...
  </div>
</div>

</body></html>