2009-10-13 19 views
3

Je souhaite avoir une disposition [Fixe] [Liquide] [Fixe] compatible avec plusieurs navigateurs.Fixe - Liquide - Disposition fixe

HTML:

body 
    div#col-1 
    div#col-2 
    div#col-3 

CSS:

#col-1 { 
    width:150px; 
    float:left; 
    } 
    #col-2 { 
    width:100%; 
    padding:0 150x; 
    } 
    #col-3 { 
    positon:absolute: 
    right:0; 
    width:150px; 
    } 

Est-ce que ce travail/meilleure façon de le faire?

Répondre

0

Check this out: http://siteroller.net/articles/3-column-no-tables-no-floats

Mais non, je ne pense pas que cela fonctionnerait. Il y a beaucoup de liens dans cet article pour résoudre votre problème.

Et s'il y a un intérêt, je vais prolonger ce qui y est écrit.

+0

C'est ce que je veux: http://siteroller.net/articles/3-caolumn-no-tables-no-floats/prettyboxes-fixed-and-fluid-columns.php mais le lien est en panne! – 3zzy

4

Ceci est assez simple.

est ici le code

<html> 
<head> 
<style type="text/css"> 
#left { 
    float: left; 
    width: 150px; 
    border: 1px solid black; 
    background-color: #999; 
    height: 50px; 
} 
#right { 
    float: right; 
    width: 150px; 
    border: 1px solid black; 
    background-color: #999; 
    height: 50px; 
} 
#center { 
    /* margin with 10px margin between the blocks*/ 
    margin: 0 160px; 
    border: 1px solid black; 
    height: 50px; 
} 
</style> 
</head> 
<body> 
<div id="left">Text</div> 
<div id="right">Text</div> 
<div id="center">Text</div> 
</body> 
</html> 

Je suis en utilisant des flotteurs au lieu de position absolue. L'avantage d'utiliser des flotteurs au-dessus du positionnement absolu est que vous pouvez placer un autre div en dessous, disons le pied de page. Et donnez-le simplement: les deux et il apparaîtra automatiquement au bas de la page.

est un exemple ici avec un pied de page

<html> 
<head> 
<style type="text/css"> 
#left { 
    float: left; 
    width: 150px; 
    border: 1px solid black; 
    background-color: #999; 
    height: 50px; 
} 
#right { 
    float: right; 
    width: 150px; 
    border: 1px solid black; 
    background-color: #999; 
    height: 50px; 
} 
#center { 
    /* margin with 10px margin between the blocks*/ 
    margin: 0 160px; 
    border: 1px solid black; 
    height: 50px; 
} 
#footer { 
    clear: both; 
    margin-top: 10px; 
    border: 1px solid black; 
} 
</style> 
</head> 
<body> 
<div id="left">Text</div> 
<div id="right">Text</div> 
<div id="center">Text</div> 
<div id="footer">footer</div> 
</body> 
</html> 

Voila! Vous avez votre disposition liquide.

0

J'aime la réponse de Robert. Je voudrais également ajouter une enveloppe autour de la gauche, droite, centre et pied de page. Ici, je mets l'id « page »:

<body> 
    <div id="page"> 
     <div id="left">Text</div> 
     <div id="right">Text</div> 
     <div id="center">Text</div> 
     <div id="footer">footer</div> 
    </div> 
</body> 

Ensuite, vous pouvez également ajouter le style de la « page »:

#page { 
    min-width: 600px; 
    } 

De cette façon, si l'utilisateur rétrécit leur navigateur vers le bas pour une très petite taille, le contenu semble toujours bon.