28172 sujets

CSS et mise en forme, CSS3

{Résolu}Clar both ?

Bonsoir à tous,

Je viens de m'inscrire car j'aurais besoin de votre aide.

J'ai bien essayé de rechercher la solution avant et j'ai trouvé celui-ci : Empêcher les flottants de dépasser de leur conteneur.

J'ai pu avancer dans mon projet grâce à clear:both mais je rencontre un autre petit souci.

http://nsa28.casimages.com/img/2011/07/24/110724101340615317.png

Comme vous pouvez remarquer que la colonne gauche ne va pas jusqu'à au même niveau que celui du colonne droite.

Voici mes codes :

<body>
    	<div id="container">
    		<div id="header">
        		<a href="#"><img src="images/logo.png" alt="" width="240" height="120" border="0" /></a>
        	</div>
        	<div id="titlepage">
        		<p>Bienvenue sur notre site ########</p>
        	</div>
            	<div id="col_G">
            		lien<br />
                	lien<br />
                	lien
            	</div>
            	<div id="col_D">
            		<p>je suis une petite phrase qui est rangé dans le corps</p>
                	<p>je suis une petite phrase qui est rangé dans le corps</p>
                	<p>je suis une petite phrase qui est rangé dans le corps</p>
                	<p>je suis une petite phrase qui est rangé dans le corps</p>
                	<p>je suis une petite phrase qui est rangé dans le corps</p>
                	<p>je suis une petite phrase qui est rangé dans le corps</p>
                	<p>je suis une petite phrase qui est rangé dans le corps</p>
            	</div>
            	<div id="clear">
            		&nbsp;
            	</div>
            </div>  
        </div>
    </body>


body {
	background-color: #fff;
	font-size: 11px;
	font-family: Verdana, Arial, SunSans-Regular, Sans-Serif;
	color: #000;
	padding:0px;
	margin:0px;
}

#container {
	width: 900px;
	border: solid 1px #000;
	margin-top: 20px;
	margin-left: auto;
	margin-right: auto;
}

#header {
	margin-top: 15px;
	margin-left: 30px;
	margin-bottom: 15px;
}

#titlepage {
	background-color: #693;
	font-size: 18px;
	font-weight: bold;
	text-align: center;
	padding-top: 5px;
	padding-bottom: 5px;
	color: #fff;
}

#corps {
}

#col_G {
	float: left;
	width: 300px;
	background-color: #3C9;
}

#col_D {
	float: right;
	width: 600px;
	background-color: #996;
}

#clear {
	clear: both;
}


C'est mon premier site, donc vous m'excuserez si je code un peu n'importe quoi.
Tous les conseils, remarques et critiques sont ouvert Smiley cligne

Je vous remercie beaucoup de vos réponses.

Bonne soirée Smiley cligne
Modifié par Alsa_noob (25 Jul 2011 - 05:35)
La question est : est-ce que tu as besoin d'être compatible avec IE6 et IE7 ? Si la réponse est non tu peux utiliser la propriété display table/table-cell qui fonctionne très bien pour ce que tu veux faire.


<!DOCTYPE html>
<html lang="fr">
	<head>

		<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
		<meta charset="UTF-8" />

		<title>2 columns layout</title>

		<style>
		html, body {
			margin: 0;
			padding: 0;
		}

		body {
			background: #000000;
			color: #ffffff;
			font-family: Verdana, Arial, Helvetica, sans-serif;
		}
		
		#layout {
			width: 960px;
			margin: 0 auto;
		}
		
		#header {
			height: 100px;
			padding: 5px;
			background: #831224;
		}
		
		#columns {
			display : table;
			background: #152f40;
		}

		#aside {
			display: table-cell;
			width: 190px;
			padding: 5px;  		
			background: #152f40;
		}
		
		#content {
			display: table-cell;
			width: 750px;
			padding: 5px;  		
			background: #a6986f; 
		}

		#footer {
			height: 50px;
			padding: 5px;
			background: #831224;
		}
		</style>

	</head>
	<body>

		<div id="layout">

			<div id="header">
				<p>Header</p>
			</div><!-- #header -->

			<div id="columns">

				<div id="aside">
					<p>Aside</p>
				</div><!-- #aside -->

				<div id="content">
					<h1>Gabarit 2 colonnes avec display table</h1>
					<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer et turpis erat, nec faucibus lacus. Vestibulum non nisl ligula. Nullam eu leo urna. Nam imperdiet enim quis massa sagittis eget dignissim nunc ultricies. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec arcu augue, euismod quis pulvinar non, convallis ut lacus. Integer lectus risus, accumsan at viverra vel, consequat at ante. Vestibulum sapien mi, blandit vitae ultricies a, malesuada ut lacus. Nulla adipiscing consectetur condimentum. Sed ullamcorper vehicula varius.</p>
				</div><!-- #content -->

			</div><!-- #columns -->

			<div id="footer">
				<p>Footer</p >
			</div><!-- #footer -->

		</div><!-- #layout -->

	</body>
</html>
Bonsoir à toutes et à tous,

en fonction de ton code HTML, et afin de ne pas tout réécrire, la solution consiste à placer des height dans les différents balise <div>. Voici où les placer :
#col_G {
height:100%;
}

#col_D {
height:100%;
}
Mais pour que cela fonctionne, il faut aussi placer <div id="col_G"> et <div id="col_D">, pourquoi pas dans la balise <div id="corps"> que tu avais prévu à cette effet et que tu n'as pas encore utilisé. Et en conséquence de quoi, tu doit donner aussi une dimension, autre que auto, en faisant :
#corps {
height:300px;
}
Dans le lien que tu as indiqué, il est fait référence justement à cette propriété height !

Hormis la solution de l'usage de table-cell indiqué par jb_gfx, à vrai dire, je n'ai pas trouvé de solution simple pour aligner les hauteurs de deux colonnes, mais au moins cette solution fonctionne sous MSIE 8.0.

@+
Modifié par Artemus24 (25 Jul 2011 - 00:23)
Merci beaucoup à vous deux pour vos réponses.

jb_gfx a écrit :
La question est : est-ce que tu as besoin d'être compatible avec IE6 et IE7


Oui, s'il vous plaît.


Artemus24, je vais relire de ce pas

(PS : J'ai bien essayé de mettre height: auto; dans le div "corps" qui est entouré des div col_G et col_D, sans effet.)

Bonne soirée.
Modifié par Alsa_noob (24 Jul 2011 - 23:12)
Bonjour à tous,

Souci résolu Smiley smile

J'ai mis un couleur de fond identique à celui du col_G sur le div corps.

Merci beaucoup
Salutation @tous

J'ai eu bien du mal à suivre le topic »
Message effacé, transformé par la suite, remplacer au même « anchor:ancre ». @Artemus24.

Bon d'accord il est où le bon sens. On transforme un message comme ça ?

Smiley cligne

..
Sujet clos
Aller à