xHTML / CSS: comment obtenir une largeur interne de 100% moins une autre largeur de div

J’ai 2 div nesteds à l’intérieur de celui qui a la largeur: 100%. Les deux div nesteds doivent être dans une ligne et la première doit avoir la taille de son contenu:

inner div 1. Some text...
inner div 2...

La question est de savoir comment faire # inner2 div pour obtenir le rest de l’espace horizontal si la largeur du div # inner1 n’est pas spécifiée et dépend de ce qu’il contient à l’intérieur?

PS Tous les styles sont dans des classes séparées dans mon cas, ici j’ai mis CSS dans des atsortingbuts de style juste pour simplifier.

Je veux que le résultat fonctionne dans IE7 + et FF 3.6

En plus de détails pour moi ça ressemble à ceci:

   .captionText { float:left; } .captionLine { height: 1px; background-color:black; margin: 0px; margin-left: 5px; margin-top: 5px; border: 0px; padding: 0px; padding-top: 1px; }  
Some text
something

Voici l’image de ce que je veux: Image de ce que je veux

Le overflow: hidden; mystérieux overflow: hidden; est ton ami ici. Il empêche les éléments adjacents aux flotteurs de s’étendre derrière le flotteur – je pense que c’est la disposition que vous recherchez.

Voici un HTML légèrement modifié: Je ne pense pas que vous pouvez avoir # caractères dans vos id :

 
inner div 1. Some text...
inner div 2...

Et voici le CSS pour réaliser la mise en page souhaitée.

(J’ai ajouté du code CSS pour IE 6 avec des commentaires conditionnels HTML. Je viens de remarquer que vous n’en aviez pas besoin pour fonctionner dans IE 6 également, mais si vous voulez être sympa avec les utilisateurs d’IE 6 …)

   

Testé et travaillant dans IE 6, 7 et 8; Firefox 3.5; et Chrome 4.

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

HTML

 

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 .

Vous devriez faire flotter le div intérieur1 vers la gauche, comme ceci:

 
gnihihi

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

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

  
hey you always use proper tools.

En développant la réponse de @Nasser Hajloo, cela fonctionne pour moi (même dans IE6)

  
hey you
always use proper tools.

Essayez-le avec le div plus petit que 400px pour voir comment il ajuste. (Cela fonctionne aussi avec des divs plutôt qu’avec des spans – la clé est la largeur: auto dans le premier div / span.)

Essayez ceci: imbriquer inner1 dans inner2 et enlevez l’ display:inline from inner2 , comme ceci:

 
inner div 1. Some text...
inner div 2...

Vous pouvez le voir fonctionner ici: http://jsbin.com/adiwi

De votre code, il semble que vous essayiez d’obtenir une ligne horizontale pour remplir l’espace vide de votre div. Si je corrige, vous cherchez à créer un effet visuel avec le balisage. Corrige moi si je me trompe.

(Serait bien de voir une image de ce que vous voulez)

Exemple:

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

Ce n’est pas la meilleure pratique. Vous devriez essayer d’obtenir cet effet avec CSS.

Essayez de rendre votre code plus sémantique en premier:

 

Caption

Pour obtenir la ligne:

  1. créer une image avec la couleur que vous voulez
  2. faire sa hauteur la même que vous voulez que la ligne soit en px
  3. le positionne avec la propriété d’ backgroundbackground

.

 #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 */ } 

Votre premier problème est que vous préfixez vos identifiants avec un «#». Le # n’est utilisé dans CSS que pour faire référence à l’élément avec cet identifiant, par exemple la règle CSS #outer {width: 100%} fait référence à votre élément:

 

De plus, vous n’avez pas besoin d’utiliser des largeurs sur les div (ou tout autre élément de bloc) qui ne flottent pas, car elles occupent déjà 100% de la largeur disponible.

Si vous voulez que les 2 DIV apparaissent sur la même ligne, vous devez faire flotter le premier à gauche. La DIV adjacente apparaîtra alors sur le côté, encore une fois vous n’avez pas besoin de spécifier widthd pour le deuxième élément. Voici votre exemple complet, y compris une bordure de couleur différente pour chaque div.

J’ai agrandi les frontières pour mieux voir ce qui se passe.

   
inner div 1. Some text...
inner div 2...

Une autre solution consiste à exécuter un javascript qui redimensionne la classe captionLine lorsque le document a été chargé comme ceci.
Il a fallu du temps pour le faire fonctionner sous IE8, je n’ai pas essayé IE7 mais ça devrait marcher.
2 choses à noter.

  1. IE ne prend pas en charge getElementsByClassName, cette fonction est donc réécrite.
  2. IE gère différemment les marges lorsque les objects sont redimensionnés et déplacés avec style.marginLeft, en quelque sorte IE semble conserver la marge dans la déclaration de classe et l’ajoute au nouveau style.margin.
   
Some text
something
Some text
something

La réponse est vraiment simple! Si vous avez fixé div (menu) sur le côté gauche, alors donnez un div float fixe : left et votre div flexible -left left qui est plus grand que la largeur du premier div fixe.