xHTML / CSS: Comment faire en sorte que la div interne obtienne 100% de largeur moins une autre largeur de div

Question

J'ai 2 divs imbriqués à l'intérieur extérieur, qui a width:100%. Les deux divs imbriqués doit être sur une seule ligne et premier doit obtenir la taille de son contenu:

<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 Question est de savoir comment faire #inner2 div pour le repos de l'espace horizontal si la largeur de la #inner1 div n'est pas spécifié et dépend de ce qu'il est à l'intérieur?

P. S. Tous les styles sont dans des classes séparées, dans mon cas, ici, j'ai mis le CSS dans les attributs de style juste pour la simplification.

Je veux la suite de travailler dans IE7+ et FF 3.6

Dans plus de détails pour moi, il ressemble à ceci:

 <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>

Voici l'image de ce que je veux:

Answer 1

Le mystérieux overflow: hidden; est votre ami ici. Il s'arrête éléments adjacents à la flotte de l'extension derrière le float - je pense que c'est la mise en page que vous cherchez.

Voici quelques légèrement modifié HTML: je ne pense pas que vous pouvez avoir # caractères dans votre ids:

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

Et voici le CSS pour réaliser la mise en page que vous voulez.

(J'ai mis supplémentaires CSS pour IE 6 avec HTML commentaires conditionnels. Je viens de remarquer que vous n'avez pas vraiment besoin de travailler dans IE 6, mais si vous avez envie d'être gentil envers IE 6, utilisateurs...)

<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]-->

Testé et de travail dans IE 6, 7, et 8, Firefox 3.5 et Chrome 4.

Answer 2

Si vous lisez ceci, vous pouvez probablement utiliser calc , alors soyez reconnaissant.

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%;
}
 

Voir l' exemple de travail sur JSFiddle .

Answer 3

Vous devez faire flotter la division inner1 vers la gauche, comme suit:

 <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>
 

Cela devrait faire l'affaire. Vérifiez-le! au revoir

Answer 4

Vous n'avez pas besoin d'utiliser div pour l'élément imbriqué, utilisez simplement SPAN comme ceci

  <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 5

En développant la réponse de @Nasser Hajloo, cela fonctionne pour moi (même dans 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> 
 

Essayez avec la division principale inférieure à 400px pour voir comment elle s’ajuste. (Cela fonctionne aussi avec des divs plutôt que des span - la clé est la largeur: auto dans le premier div / span.)