Bonjour,
J'ai effectué une mise en page avec trois colonnes.
Il s'agit d'une largeur fixe de 780 px avec un positionnement en float à dte et à gche. Le div central est fluide.
Et j'ai un problème avec les colonnes de droite et de gauche qui ne commencent pas au même niveau que ma colonne centrale. Elles sont décalées en haut.
Je joins une image au post pour illustrer le pb.
Et voici le code :
Merci d'avance,
Lou
Modifié par lou64 (13 Oct 2008 - 22:35)
J'ai effectué une mise en page avec trois colonnes.
Il s'agit d'une largeur fixe de 780 px avec un positionnement en float à dte et à gche. Le div central est fluide.
Et j'ai un problème avec les colonnes de droite et de gauche qui ne commencent pas au même niveau que ma colonne centrale. Elles sont décalées en haut.
Je joins une image au post pour illustrer le pb.
Et voici le code :
<head>
<title>Document sans nom</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="../css/layout.css" />
<style type="text/css">
html { background: #FED6FE; }
body { font: 100% Verdana, Arial, Helvetica, sans-serif; color: #993399; text-align: center; }
div#container { width: 780px; /*background-color: #FFFFFF;*/ margin: 0 auto; padding: 0; text-align: left; }
div#branding { margin: 0; padding: 0; background-color: #CCCCFF; }
div#content { width: 100%; margin: 0; padding: 0; }
div#pathway { margin: 0; padding: 0; background-color: #CCCCFF; }
div#content_menu { float: left; width: 150px; background-color: #CC99CC; }
div#content_sub { float: right; width: 150px; background-color: #CCFFFF; }
div#content_main { margin-left: 160px; margin-right: 160px; padding: 0; background-color: #FFCCCC; }
div#site_info { margin: 0; padding: 0; clear: both; background-color: #CC00CC; }
</style>
</head>
<body>
<div id="container">
<div id="branding">Branding</div>
...
<div id="content">
<div id="pathway">Pathway line</div>
<div id="content_menu">
<h3>Left column</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse eu urna non ipsum malesuada congue. Nunc eu ligula non nisl faucibus dictum. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In sem. Curabitur fringilla dolor eget massa. Vestibulum feugiat, tellus at rutrum tempor, sapien mi condimentum metus, at blandit lorem ligula eget quam. Fusce commodo tortor eget metus. Cras ut mauris. Suspendisse quam. Donec varius libero ut purus. Aliquam erat volutpat. Praesent eu felis. Curabitur eu erat in enim euismod faucibus. Duis a tortor sed arcu scelerisque bibendum. Suspendisse suscipit egestas nunc. Nullam nulla lorem, convallis at, adipiscing vitae, rhoncus et, sem. Ut vulputate. Duis at ipsum. Maecenas in lectus sed lacus malesuada laoreet.</p>
</div>
<div id="content_sub">
<h3>Right column</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse eu urna non ipsum malesuada congue. Nunc eu ligula non nisl faucibus dictum. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In sem. Curabitur fringilla dolor eget massa. Vestibulum feugiat, tellus at rutrum tempor, sapien mi condimentum metus, at blandit lorem ligula eget quam. Fusce commodo tortor eget metus. Cras ut mauris. Suspendisse quam. Donec varius libero ut purus. Aliquam erat volutpat. Praesent eu felis. Curabitur eu erat in enim euismod faucibus. Duis a tortor sed arcu scelerisque bibendum. Suspendisse suscipit egestas nunc. Nullam nulla lorem, convallis at, adipiscing vitae, rhoncus et, sem. Ut vulputate. Duis at ipsum. Maecenas in lectus sed lacus malesuada laoreet.</p>
</div>
<div id="content_main">
<h3>Central column</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse eu urna non ipsum malesuada congue. Nunc eu ligula non nisl faucibus dictum. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In sem. Curabitur fringilla dolor eget massa. Vestibulum feugiat, tellus at rutrum tempor, sapien mi condimentum metus, at blandit lorem ligula eget quam. Fusce commodo tortor eget metus. Cras ut mauris. Suspendisse quam. Donec varius libero ut purus. Aliquam erat volutpat. Praesent eu felis. Curabitur eu erat in enim euismod faucibus. Duis a tortor sed arcu scelerisque bibendum. Suspendisse suscipit egestas nunc. Nullam nulla lorem, convallis at, adipiscing vitae, rhoncus et, sem. Ut vulputate. Duis at ipsum. Maecenas in lectus sed lacus malesuada laoreet.</p>
</div>
...
<div id="site_info">
<h3>Footer</h3>
</div>
</div>
</body>
</html>[url=upload/18117-pbfloat.jpg][img]upload/18117-pbfloat.jpg[/img][/url]
Merci d'avance,
Lou
Modifié par lou64 (13 Oct 2008 - 22:35)
: