disposition de trois colonnes fluide

Vous pouvez copier & coller le balisage suivant et css pour voir l'effet.disposition de trois colonnes fluide

Le problème existe dans la partie "pied de page".

Maintenant, "column1" et "column3" sont positionnés de façon absolue.

Cela fonctionne uniquement lorsque "column2" est le plus élevé. Comment faire en sorte que le «pied de page» ne s'entrelace pas avec la colonne1 ~ colonne3 dans toutes les conditions?

balisage:

<body> 
<div id="mainwrap"> 
<div id="header"><p>A fluid-width faux-columns example</p></div> 
<div id="contentarea" class="clearfix"> 
<div id="contentarea2" class="clearfix"> 

<div id="column2"> 
<p>This layout uses absolute/relative positioning to position the side columns within 
their respective faux columns containers.</p> 
<p>You can control the maximum and minimum widths of the fluid center area. 
Once the layout reaches its maximum width, it centers itself in the browser as the window 
gets wider.</p> 
<p>Nulla scelerisque. Sed tincidunt. Quisque eu nisl. Phasellus 
    mi ante, aliquet vel, vestibulum sit amet, consectetuer non, ante. Suspendisse 
    consequat condimentum enim. Morbi vestibulum lorem sit amet enim. Nulla venenatis 
    fermentum purus.</p> 
    <p>Nunc justo nisl, vulputate in, sagittis in, pretium sodales, 
    magna. Nullam felis diam, bibendum ut, dictum in, tincidunt vitae, magna. 
    Nunc mattis congue leo.</p> 
</div><!--end column2--> 
<div id="column1"> 
<ul> 
<li><a href="#">Link 1</a></li> 
<li><a href="#">Link 2</a></li> 
<li><a href="#">Link 3</a></li> 
</ul> 
</div><!--end column1--> 
<div id="column3"> 
<p>This template uses the Alsett clearing method.</p> 
</div><!--end column3--> 
</div><!--end contentarea2--> 
</div><!--end contentarea--> 
<div id="footer">This is the footer</div> 
</div><!--end mainwrap--> 
</body>

css:

body {font: 1.0em verdana, arial, sans-serif; 
    text-align:center; 
    } 
* {margin:0; padding:0;} 
div#mainwrap {min-width:780px; max-width:960px; 
    margin-left:auto; margin-right:auto; 
    text-align:left; 
    } 
div#header {height:32px; background-color:#CAF; text-align:center;} 
div#contentarea { background-color:#FFF; 
    background:url(images_pres/faux_left.gif) repeat-y top left; 
    position:relative; 
    } 
div#contentarea2 {background-color:#FFF; 
    background:url(images_pres/faux_right.gif) repeat-y top right; 
    position:relative; 
    } 
div#column1 {width:150px; 
    position: absolute; 
    top:0px; left:0px; 
    background-color:#CCC; 
    overflow:hidden; 
    } 

div#column2 {background-color:#FFF; 
    margin:0 170px 0 150px; 
    } 
div#column3 {width:170px; 
    position:absolute; 
    top:0px; right:0px; 
    background-color:#DDD; 
    overflow:hidden; 
    } 
div#footer {background-color:#FAC; text-align:center; padding-top:6px;} 

div#column1 ul {margin: 20px 0 0 26px;} 
div#column2 p {font-size:.8em; margin:0 30px 1em ;} 
div#column3 p {margin: 20px 10px 0 10px;}

Source

2009-07-16 omg

Ce appartient à doctype.com – CarlG

Vous ne pouvez pas simplement en css. Lorsque vous positionnez vos colonnes de cette façon, elles ne font plus partie du flux de documents. Pas même clair: les deux auront un effet.

Vous pouvez donner à votre colonne centrale une hauteur minimale si vous connaissez la hauteur des colonnes latérales ou si vous pouvez utiliser javascript pour calculer la plus grande hauteur. Ou vous pourriez faire flotter les colonnes latérales, mais cela dicterait un certain ordre des blocs dans le code HTML.

Source

2009-07-16 20:23:35 jeroen

Un moyen facile est de faire un flotteur: à gauche sur tous les trois divs centre, puis utilisez

<div style="clear:both;">&nbsp;</div>

Il y a des dizaines d'exemples sur le web voir 960 Grid System est un cadre pour quelque chose comme ça.

Vous devez éviter le positionnement absolu lorsque cela est possible.

Source

2009-07-16 21:20:08 Davin

Column1 et Colum3 est de largeur fixe, tandis que colonne2 est flexible. peut atteindre cela en utilisant float? – omg

http://www.alistapart.com/articles/holygrail/ a un tutoriel fantastique sur la façon d'y parvenir. – Davin

Vous pouvez également envisager la Fluid 960 Framework

Source

2009-07-17 19:44:34 pegasus4747

Remplacez votre code avec:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<link href="Styles/Copy%20of%20Site.css" rel="stylesheet" type="text/css" /> 
<body style="height:335px;"> 
<div id="mainwrap"> 
<div id="header"><p>A fluid-width faux-columns example</p></div> 
<div id="contentarea" class="clearfix"> 
<div id="contentarea2" class="clearfix"> 

<div id="column2"> 
<p>This layout uses absolute/relative positioning to position the side columns within 
their respective faux columns containers.</p> 
<p>You can control the maximum and minimum widths of the fluid center area. 
Once the layout reaches its maximum width, it centers itself in the browser as the window 
gets wider.</p> 
<p>Nulla scelerisque. Sed tincidunt. Quisque eu nisl. Phasellus 
    mi ante, aliquet vel, vestibulum sit amet, consectetuer non, ante. Suspendisse 
    consequat condimentum enim. Morbi vestibulum lorem sit amet enim. Nulla venenatis 
    fermentum purus.</p> 
    <p>Nunc justo nisl, vulputate in, sagittis in, pretium sodales, 
    magna. Nullam felis diam, bibendum ut, dictum in, tincidunt vitae, magna. 
    Nunc mattis congue leo.</p> 
</div><!--end column2--> 
<div id="column1"> 
<ul> 
<li><a href="#">Link 1</a></li> 
<li><a href="#">Link 2</a></li> 
<li><a href="#">Link 3</a></li> 
</ul> 
</div><!--end column1--> 
<div id="column3"> 
<p>This template uses the Alsett clearing method.</p> 
</div><!--end column3--> 
</div><!--end contentarea2--> 
</div><!--end contentarea--> 

</div><!--end mainwrap--> 
<div id="footer" style="vertical-align:bottom;margin-top:100px;">This is the footer</div> 
</body>

Source

2013-02-02 10:54:59

disposition de trois colonnes fluide

Répondre

Questions connexes