3 divs flottant avec centre dynamique de largeur

voix
3

D'accord si mon problème est que je ne peux pas obtenir le div centre pour définir dynamiquement sa largeur en fonction de la largeur du navigateur et flottent encore entre les deux divs.

<style type=text/css>
#container{width:100%;}
#left{min-height:70px;width:60px;float:left;}
#middle{min-height:70px;width:100%;float:left;}
#right{min-height:70px;width:60px;float:right;}
</style>
<div id=container>
    <div id=left>text</div>
    <div id=middle>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur fringilla enim eget augue pretium facilisis. Quisque euismod mauris eu odio tincidunt pharetra interdum enim dignissim. Phasellus eleifend viverra diam, et vestibulum orci feugiat vitae. Fusce rhoncus, dolor sit amet rhoncus pulvinar, elit libero tincidunt tortor, non elementum lacus nisl sit amet lorem.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur fringilla enim eget augue pretium facilisis. Quisque euismod mauris eu odio tincidunt pharetra interdum enim dignissim. Phasellus eleifend viverra diam, et vestibulum orci feugiat vitae. Fusce rhoncus, dolor sit amet rhoncus pulvinar, elit libero tincidunt tortor, non elementum lacus nisl sit amet lorem.</div>
    <div id=right>text</div>
</div>
Créé 09/08/2011 à 15:58
source utilisateur
Dans d'autres langues...                            


5 réponses

voix
2

Vous pouvez définir la largeur du milieu div en utilisant jQuery , comme tel:

$('#middle').width($('#container').width()-120);

travail Demo

Créé 09/08/2011 à 16:03
source utilisateur

voix
8

Vous pouvez essayer de configurer votre CSS comme ceci:

#container{width:100%;}
#left{min-height:70px;width:60px;float:left;}
#middle{min-height:70px;padding:0 60px}
#right{min-height:70px;width:60px;float:right;}

jsFiddle

Créé 09/08/2011 à 16:05
source utilisateur

voix
1

Essayez cela avec javascript trivial: http://jsfiddle.net/maniator/SjMqU/

var middle = document.getElementById('middle');
var win_width = document.body.offsetWidth;
middle.style.width = (win_width - 140) + 'px';

Et ce violon fonctionne sur Redimensionner la fenêtre: http://jsfiddle.net/maniator/SjMqU/4/

Créé 09/08/2011 à 16:06
source utilisateur

voix
0

La meilleure façon de le faire serait de le mettre dans une table, mais si vous ne voulez pas que juste faire tous les divs se comportent comme des cellules:

<style type="text/css">
  div{display:table-cell;}
  #container{width:100%;}
  #left{min-width:60px;}
  #middle{min-width:50%;}
  #right{min-width:60px;}
</style>
.....
Créé 09/08/2011 à 16:10
source utilisateur

voix
0

Vous pouvez faire quelque chose comme ceci:

#container{width:100%;
}
#left, #middle, #right{min-height:70px; 
    display:inline-block;
    vertical-align:top;
}
#left{width:19%;
    background:red;
}
#middle{width:60%; 
    background:green;
}
#right{width:19%; 
    background:blue;
}

http://jsfiddle.net/jasongennaro/8BqP9/

Créé 09/08/2011 à 16:11
source utilisateur

Cookies help us deliver our services. By using our services, you agree to our use of cookies. Learn more