Largeur d'un div qui prend toutes les largeurs par rapport a un autre

Bonjour,
Je commence à faire mon intégration et puis je suis tomber sur un dilemme :
J'ai 2 div tout flote left, div 1 = contenu prends 75 % / div 2 = menu gauche.
c'est ce que je veux faire c'est que si j énlèves les contenus dans div 2 alors div 1 prends toutes les largeurs.
Merci de votre aide.

Un petit schéma ? car div 1 = contenu prends 75 % / div 2 = menu gauche ca ne me dit pas grand chose.
Sinon ce que tu semble vouloir faire, c'est a dire si la div 2 n'a pas de contenu (donc pas d'enfant) alors elle disparait au profit de la div 1. Dans ce cas ca se gère soit au niveau serveur soit en js. Perso je le ferait au niveau du serveur mais en js c'est simple aussi, dans les 2 cas c'est une boucle if?
Modifié par thej8 (20 Mar 2014 - 22:59)

et en fixant div 2 à 25% ça marcherait pas ?

Ainsi div 1 ferait 75% si la div 2 est là et 100% le reste du temps ?

N'oublions pas que le float n'a pas été créé pour cet emploi et que les alternatives existent :
- le display table est compatible à partir d'IE8
- le display inline-block peut être utilisé (ou simulé) à partir d'IE7
Modifié par erwan21a (21 Mar 2014 - 17:43)

Salut,
Je ne suis pas sûr de comprendre pourquoi tu souhaites faire ça. Je suppose que c'est en raison de la résolution de l'utilisateur...
Et si tu supprimais ta div en fonction de la résolution-cible avec les media queries. Quelque chose du style :

@media screen and max-width 1024px {
#div2 {display:none;}
}

etc...

.div{width:960px;
margin:auto}
je crois que cela peut vous aidé car te marge seront aligné en automatique et ta page sera centré

Bonsoir iryjob,

Si je comprends bien, vous souhaitez avoir ces deux cas :
1 - Cas à 1 colonne : DIV1 seule (100%)
2 - Cas à 2 colonnes : DIV1 (75%) + DIV2 (25%)

... avec l'adaptation automatique de la DIV1 en fonction de l'existence ou pas de la DIV2.

Ce comportement automatique peut être obtenu en combinant les propriétés display: table et table-cell (voir demo sur http://codepen.io/guiwint/pen/sicej/), avec un compatibilité navigateurs très satisfaisante (voir http://caniuse.com/#feat=css-table).
Exemple HTML :

<div class="table">
  <div class="col col-left">COL LEFT</div>
  <div class="col col-right ">COL RIGHT</div>
</div>
  
<div class="table">
  <div class="col col-left">COL LEFT</div>
</div>

Exemple CSS :

.table {
  width: 100%;
  display: table;
  background: grey;
}

.col {
  display: table-cell;
  padding: 30px;
  text-align: center;
}

.col-left {}

.col-right {
  width: 25%;
  background: darkgray;
}

Cette solution peut-elle répondre à votre attente, ou souhaitez-vous tout de même continuer avec des div positionnées en float: left ?

Bonne soirée et bon code...