HTML / CSS : Marge Fixe & Fluide Largeur

Est-ce assez proche?

Démo

HTML:

<div id="container">
    <div id="left"><div id="left2">leftgggg</div></div>
    <div id="right">right</div>
</div>

CSS:

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

OriginalL'auteur thirtydot

Calc soutien est décent maintenant, de sorte que vous pouvez l'utiliser pour mélanger et assortir les unités. En utilisant cela, vous pouvez venir avec quelque chose qui fonctionne assez bien:

http://jsfiddle.net/CYTTA/1/

#a {
    margin-left: 30px;
    width: calc(70% - 30px - 15px);
}

#b {
    margin-left: 30px;
    margin-right: 30px;
    width: calc(30% - 30px - 15px);
}

Vous pourriez avoir à préfixe calc avec -webkit ou -moz.

La largeur de la première est de 70%, moins la marge de gauche (30px) et moins de la moitié de la moyenne de la marge (15px). Le second est de 30%, moins la marge de droite (30px) et moins de la moitié de la moyenne de la marge (15px).

Alors que les largeurs de ne pas être exactement égal à 70% et 30%, vous aurez un fluide de mise en page avec des marges fixes.

OriginalL'auteur ahuth

Ici ma solution.

html

<div id="wrapper">
    <div id="left"></div>
    <div id="rightWrapper">
        <div id="right"></div>
    </div>
</div>

css

#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;
}

Démo: http://jsfiddle.net/GEkG7/1/

OriginalL'auteur Sotiris

Thirtydot a une belle réponse (jusqu'voter de moi) pour régler la gauche de positionnement de la div par rapport à son conteneur, je voudrais seulement suggérer qu'il peut avoir besoin d'être testé dans certains navigateurs, tels que les anciennes versions d'Internet Explorer.

Vous pouvez également envisager que le réglage d'une position de gauche par un montant fixe est plus déroutant que de se contenter d'appliquer une largeur différente.

Votre demande également un liquide de largeur et d'une marge fixe, dans l'ensemble, ce n'est plus un design fluide... votre 30px aura la même apparence dans une petite ou une grande résolution.. mais votre largeurs va changer, soit de fixer la largeur en pixels ou de définir la marge en pourcentage (Peut-être essayer d'utiliser max-width pour certains navigateurs trop pour les grandes résolutions). Les navigateurs les plus récents également régler un pixel de mise en page lors de l'augmentation de la texte/taille de zoom, les navigateurs plus anciens nécessitent l'utilisation de EMs pour la taille du texte les modifications.

exemple avec les pourcentages et les padding:

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

OriginalL'auteur Pricey