Comment puis-je atteindre des marges de fluide sur mon site avec CSS?

Question

Sur mon site, j'ai un wrapper central à largeur fixe, que je ne veux pas changer de taille, mais je veux que les marges soient redimensionnées en fonction de la taille de l'écran de l'utilisateur. J'ai essayé de tout envelopper dans une div appelée wrapper-youter, puis de le centrer par marge: 0 auto mais cela ne semble pas fonctionner.

Placer: http://antonpug.com/mainepark/

CSS:

    body {
    font-family: "Nobile", sans-serif;
    font-size:0.75em;
    text-align:center;
    min-width:1550px;
}

img#bg {
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
    z-index:-1;
}

h3 {
    font-size:1.25em;
}

header h1, header h2 {
    font-family: "Ubuntu", sans-serif;
}

header h1 {
    font-size:3em;
    margin:25px 0 0 0;
}

header h2 {
    font-size:2em;
    margin:0 0 25px 0;
}

#wrapper-inner {
    margin:25px 100px 25px 100px;
    padding:15px 0 15px 0;
    background-color:rgba(255,255,255,0.75);
    moz-border-radius: 10px;
    webkit-border-radius: 10px;
    border-radius: 10px;
}

#wrapper-outer {
    width:1500px; -- that didn't work either!!!
    margin: 0px auto;
}

#feature {
    display:inline-block;
    width:80%;
    margin:15px;
}

.column {
    display: inline-block;
    vertical-align:top;
    width:600px;
    margin:15px;
}

#col-1 {
    text-align:right;
}

#col-2 {
    text-align:left;
}

.section {
    margin:0 0 25px 0;
    height:450px;
}

footer {
    color:#909090;
}

footer a {
    margin: 0 0 25px 0;
    text-decoration:none;
    color:#909090;
}

Answer 1

Retirez la largeur min sur le corps. Si la largeur minimale pour le corps est supérieure à celle de votre contenu, les barres de défilement se manifesteront avant que les marges fluides puissent faire leur truc.

Changer les marges sur div#wrapper-inner à:

margin: 25px 0; //previous values had 100px margins for left/right which add to width per box model

Enfin, ajuster div#wrapper-outer à la largeur de votre contenu comme les Slaks suggèrent.

Answer 2

Vous devez ajouter une largeur fixe à l'emballage centré.

Answer 3

Ajoutez simplement une marge de pourcentage à votre col-1 Div donc vos marges s'adaptent de manière fluide.

Quelque chose comme 8% Cela semble bon.

CSS

#col-1 {
 margin-right: 8%;
}

Supprimez également la déclaration de marge sur votre col-2 Div donc vos marges s'adaptent proportionnellement.