[Résolu] un corps variable et une colonne droite fixe, le tout centré

Bonjour,

j'ai beau chercher parmi les références du site j'arrive pas à mes fins

le but : avoir un conteneur principale centré et non fixe (mini 775; max 1024), ça j'y arrive

ce conteneur doit contenir 2 div :
- un corps de largeur variable, qui prend toujours le maximum de l'espace disponible (donc en fct de la taille du navigateur)
- une colonne à droite de taille fixe (160 px)

voilà un exemple très simple, c'est ce que j'ai pu faire de mieux :
http://raphael.pazdzior.free.fr/essai_ok.php

problème : celui que j'apelle "le corps" déborde sur le menu

j'ai essayé d'autres techniques mais comme je ne veux pas donner de taille fixe au corps et que je veux qu'il prenne toujours le maximum de l'espace disponible, ça coince

j'espère que quelqu'un pourra m'aider, je rame
Modifié par raph331 (10 Mar 2009 - 00:47)

Salut,

un de mes sites avec une mise en page similaire.

bzh a écrit :
Salut,

un de mes sites avec une mise en page similaire.

merci bcp c'est bien ce que je veux je regarde ça

bon c'est impeccable j'ai un peu galéré car j'avais pas vu le javascript pour la compatibilité de IE < 7, mais c'est impec maintenant !

je me permets de mettre une ossature très largement inspirée de ton site ici, je suis sûr que ça pourra servir à d'autres, j'espère que t'y verra pas d'inconvénient

merci en tout cas ! à bientôt

<!--[if lt IE 7]>
<style type="text/css">
#global {
width: 900px;
width: expression(document.body.clientWidth <= 750? "749px" : document.body.clientWidth >= 1000? "1001px" : "auto");
}
div#menu_principal ul, div#recherche, div#page, div#pied_page{
overflow: visible;
height:1%;
}
</style> 
<![endif]-->

<div id="global">

  <div id="entete">
    entete
  </div>


  <div id="menu_principal">
  menu
  </div>

  <div id="page">
    <div id="colonne-dr">
      Actualités
    </div>

    <div id="contenu">
        <div>contenu</div>
    </div>
  </div>

  <div id="pied_page">
    pied page
  </div>
</div>

la css :

body{
height : 100%;
margin : 23px 2%;
text-align: center;
}

/*conteneur global du site */
#global{ 
background : #fff;
margin: auto auto;
max-width: 1000px;
min-width: 750px;
text-align: left;
}

#entete{
border-left : solid 2px #fff;
border-right : solid 2px #fff;
height: 120px;
}
#menu_principal {
background : #fff url(design/bas_menu.png) no-repeat bottom right;
font : 600 1.1em "Trebuchet MS", arial, Verdana, sans-serif;
margin : 0px 2px;
padding-bottom : 11px;
word-spacing: 0.1em;
}

#page{
background: #fff url(design/fond_contenu.png) repeat-y top right ;
overflow : hidden;
padding : 0px 2px;
}
/*colonne droite menu secondaire et actualité*/
#colonne-dr{
background: #f0eded;
float:right;
padding : 0px 10px 10px 10px;
width:280px;
}

#contenu{/* la colonne de gauche constitue le contenu */
margin : 0px 320px 0px 20px;
}

A voir aussi ; Le gabarit n°6 . Un peu près la même chose. On ne les voit pas assez ces gabarits .