HTML / CSS: Marge fixe et largeur de fluide

Vous pouvez utiliser les fonctions de téléchargement et d'onctuation JavaScript. Dans chacun, vous trouverez d'abord la largeur de la grille de conteneur, puis calculez la largeur de vos grilles de votre 70PC et de vos grilles de 30 pc en pixels et de les définir via JS.

Par exemple, utilisez le code suivant dans vos fonctions de surcharge et d'onctention pour la page: < / p> xxx

Cela peut être évident et vous avez probablement déjà déjà roulé, mais (70% + 30% + 30%)> 100%. Sans une sorte de capacité calculative, cela ne fonctionnera pas et CSS2 ne semble pas avoir cette capacité. JavaScript pourrait le faire, car une autre affiche a suggéré, et CSS 3 est en raison de l'ajout , apparemment.

Pas que c'est une solution à votre enquête initiale, mais vous pouvez appliquer une largeur fixe sur le conteneur droit et maintenir la fluidité à gauche. P>

<div style="margin-left: 30px; float: right; width: 270px;">
    <p>Content text ...</p>
</div>
<div style="margin-right: 300px;">
    <p>Sidebar text ...</p>
</div>

est assez proche?

Démo en direct em> strong> strong> p>

html: strong> p> xxx pré>

CSS: strong> p>

#container {
    margin: 0 30px 0 30px;
    overflow: hidden;
    background: #f3c
}
#left {
    float: left;
    width: 70%;
    position: relative;
    left: -30px;
}
#left2 {
    height: 200px;
    margin: 0 0 0 30px;
    background: #ccc
}
#right {
    height: 200px;
    float: right;
    width: 30%;
    background: #666
}

voici ma solution.

html fort> p> xxx pré>

CSS fort> p>

#wrapper {
    margin:0 30px;
}

#left {
    width:70%;
    height:200px;
    background:black;
    float:left;
}
#rightWrapper {
    margin-left:99px;
}
#right {
    width:30%;
    height:200px;
    float:right;
    background:grey;
}

Thirtydot a une bonne réponse (up vote de moi) pour ajuster le positionnement de gauche du divon par rapport à son conteneur, je ne suggérerais que cela peut nécessiter des tests dans certains navigateurs, tels que des versions plus anciennes d'Internet Explorer.

Vous pouvez également considérer que l'ajustement d'une position gauche par une quantité fixe est plus confusque que d'appliquer une largeur différente. P>

Vous demandez également une largeur de fluide et une marge fixe, globalement ce n'est plus un fluide. mise en page ... votre 30px aura la même résolution dans une grande ou une petite résolution. Mais vos largeurs changeront, puis fixez les largeurs aux pixels ou définissez la marge sur un pourcentage (essayez peut-être d'utiliser MAX-Larth pour certains navigateurs pour plus gros. résolutions). Les nouveaux navigateurs ajustent également une mise en page de pixels lors de l'augmentation de la taille du texte / du zoom, des navigateurs plus anciens nécessitent une utilisation des SME pour les modifications de taille de texte. P>

exemple avec les pourcentages et le rembourrage: P>

#container {
    margin: 0 8% 0 8%;
    overflow: hidden;
    background: #f3c
}
#left {
    float: left;
    width: 62%;
    position: relative;
    padding-right: 8%;
}

Ouais, ma solution était semblable aux autres. Un #wrap a 30px rembourrage, #main et #ide ont leurs pourcentages définis et flottés à gauche et à droite respectivement . #main a un