[CSS] petit soucis de Float

[Talus]

EDIT : desoler pour les Lorem a ralonge ^^

salut a tous

j'ai un petit soucis avec un div en float

un screen sera bien plus parlant :
http://files.global-chaos.fr/Talus/GC/design.png

pour faire simple, j'arrive pas a caler le div droit au même niveau que le div gauche

voici le CSS :

#content_wrap{

	padding:2px;

	font-size:11px;

	margin-top:10px;

	margin-bottom: 10px;

	font-weight: bold;

	color: #123c62;

	top: 10px;

	clear: both;

}



#top_bar {

	width:740px;

	height:150px;

	padding:2px;

	font-size:11px;

	font-weight: bold;

	color: #fff;

	margin:auto;

}



#content{

	width:740px;

	background-image: url(images/content_bg.png);

	background-repeat:repeat;

	background-position: top left;

	border:1px solid #123c62;

	padding:2px;

	font-size:11px;

	font-weight: bold;

	color: #fff;

	margin:auto;

	margin-top:10px;

	clear:right;

}



#left_bar{

	width: 290px;

	float:left;

	background: black;

	border:1px solid #123c62;

	padding:2px;

	font-size:11px;

	font-weight: bold;

	color: #123c62;

}



#right_bar{

	width: 290px;

	float:right;

	background: black;

	border:1px solid #123c62;

	padding:2px;

	font-size:11px;

	font-weight: bold;

	color: #123c62;

}

et le HTML de la zone :

<div id="content_wrap">

				<div id="left_bar">

					<div class="menu">

						<ul class="prin">

							<li class="prin" id="welcome_page"><a href="#">Accueil</a></li>

							<li class="prin" id="general_info"><a href="#">Infos générales</a></li>

							<li class="prin" id="galaxy_view"><a href="#">Vue galaxie</a></li>

							<li class="prin"><a>Rapports</a>

								<ul>

									<li id="financial_report"><a href="#">Financier</a></li>

									<li id="technology_report"><a href="#">Technologique</a></li>

									<li id="starsystem_report"><a href="#">Systèmes</a></li>

									<li id="fleet_report"><a href="#">Flottes</a></li>

									<li id="battle_report"><a href="#">Combats</a></li>

									<li id="statistics_report"> <a href="#">Statistiques</a></li>

									<li id="order_queue"> <a href="#">Queue d'ordres</a></li>

									<li id="event_journal"> <a href="#">Journal</a></li>

								</ul><br />

							</li>

						</ul>

					</div>

				</div>

				

				<div id="top_bar">

				</div>

				

				<div id="content">

					<p>

					Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed fringilla massa eu ante hendrerit congue. Nam elementum sodales ligula ut dignissim. Vestibulum vel enim vitae turpis laoreet dapibus eu ut justo. Nulla sem eros, cursus ut condimentum sed, dictum vestibulum leo. Cras eu metus tellus, volutpat congue massa. Duis at risus nisl, ac tristique elit. Vestibulum vulputate, sem id varius tincidunt, nunc odio rutrum risus, sit amet luctus risus metus non ligula. Sed tristique dolor vitae sapien elementum ac sollicitudin urna pulvinar. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Pellentesque dictum lorem sed enim dapibus lobortis.

					</p><p>

					Mauris diam ipsum, egestas sit amet suscipit in, tempor vel elit. Vestibulum a odio magna, ut congue lectus. Phasellus porttitor ornare fringilla. Donec tincidunt fermentum eros vel fringilla. Quisque lacinia faucibus est, ac tempor magna mattis eget. Ut euismod mauris eu velit tempor aliquam. Aliquam ac ante nec eros fringilla adipiscing sit amet et magna. Vivamus fermentum mattis condimentum. Nullam sed placerat felis. Cras a erat ipsum, vitae accumsan erat. Nullam quis lacus ac tellus hendrerit rhoncus.

					</p><p>

					Etiam ornare eros a urna mollis pellentesque. Sed dolor sapien, consequat ac viverra ut, lobortis dictum sapien. Curabitur sed erat sapien, vehicula eleifend leo. Mauris arcu odio, posuere at sagittis vel, tempus id purus. Donec quis lacinia nunc. Donec sed velit in augue sagittis semper vel sit amet leo. Donec eu tellus mi, in mollis turpis. Quisque eget felis nisi, a molestie sapien. Nullam condimentum sapien id ante condimentum pulvinar. Maecenas eget nibh vitae est scelerisque sollicitudin. Etiam luctus augue in urna egestas quis tristique dolor cursus. Fusce sit amet enim quis lectus aliquam pretium non quis sapien.

					</p><p>

					Vestibulum fermentum eros at est lacinia pharetra. Mauris eget nibh tellus, congue aliquet ante. Integer sed nisl eget tellus eleifend consectetur venenatis et nibh. In hac habitasse platea dictumst. Sed consectetur lectus at augue placerat sit amet fermentum ante molestie. Phasellus vestibulum, dolor pellentesque hendrerit tempor, erat odio cursus dolor, id fringilla urna orci ac orci. Maecenas venenatis, ipsum egestas scelerisque gravida, sem dolor mollis nulla, sit amet pharetra turpis augue a eros.

					</p><p>

					Nullam volutpat, libero at pellentesque vestibulum, dui lacus mollis lacus, sed sodales eros nulla sit amet urna. Suspendisse potenti. Aenean a tellus et urna dapibus mattis hendrerit laoreet leo. Vestibulum vel quam arcu, ut commodo est. Praesent tincidunt rhoncus consectetur. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ut ante odio, vitae feugiat nibh. In sagittis metus quis odio consectetur venenatis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Fusce tempus adipiscing est, vitae tincidunt est venenatis sed. Phasellus sagittis, nunc eu laoreet ullamcorper, lacus felis faucibus eros, at pellentesque urna diam quis enim. Quisque tincidunt dui eu tellus commodo pulvinar. </p>

				</div>

				

				<div id="right_bar">

					<h2 class="widgettitle">Inscription Univers xxx (Vitesses x X)</h2>

					<div class="textwidget">texte simpas

						<form action="./lien de l'univers/reg.php" method="POST">

							<table border=0 cellspacing=0 cellpadding=2>

								<tr><td><font size="2" face="arial, verdana">Pseudo:</font></td><td><input type="text" name="character" id="user_reg" size="25"></td></tr>

								<tr><td><font size="2" face="arial, verdana">Mot de Passe:</font></td><td><input type="password" name="passwrd" id="pass_reg" size="25"></td></tr>

								<tr><td><font size="2" face="arial, verdana">E-Mail:</font></td><td><input type="text" name="email" id="email_reg" size="25"></td></tr>

								<tr><td><font size="2" face="arial, verdana">Nom de Votre planète:</font></td><td><input type="text" name="planet" id="id_planet" size="25"></td></tr>

								<tr><td><font size="2" face="arial, verdana">Accepter les Règles: </font></td><td>&nbsp; &nbsp; <input name="rgt" type="checkbox"></td></tr>

								<br>

								<tr><td></td><br><br>

								<td align=center><input name="submit" type="submit" style="width:100px" value="Inscription"></td></tr>

							</table>

						</form>

					</div>

				</div>

				

				<div class="clear"></div>

			</div>

[Holy]

Monte ton élément right_bar après ton élément left_bar.

[Talus]

ça marche merci a toi

c'est fichu float ça me donne toujours de fil a retordre

[Xenos]

Autre proposition:
- le content reste en "normal", sans float ni reset, avec un margin 0 auto pour centrer
- Le menu gauche et le menu droit passent en "position absolute"
- Le menu gauche possède l'attribut "left: 0px", le plaquant à gauche de la div parente
- Le menu droit possède l'attribut "right: 0px", plaquant son bord droit sur le bord droit du parent.

Pour éviter, sur un écran réduit, que la div centrale ne collisionne les div latérales, tu peux ajouter, à la div centrale, un padding ~px Rpx ~px Gpx avec R la taille de la div droite et G la taille de la div gauche. Ainsi, le contenu de la div centrale ne collidera pas le contenu des div latérales (attention: le contenu, pas les bordures)
Sinon, pour éviter la collision, utilise le z-index: un z-index plus élevé sur les div latérales que centrale permettra que ces div latérales soient rendues par-dessus la centrale, évitant ainsi de ne plus pouvoir naviguer sur le site.

[php_addict]

c'est marrant moi j'aurais mis ca en absolute, y a t il une raison particulière pour le choix du float?

[niahoo]

les absolute c'est le mal absolu

[Xenos]

Si c'était le mal absolu, la règle n'existerait pas et serait dépréciée depuis longtemps.
Le positionnement absolute est très amical pour placer un objet dans un autre objet (lui-même placé, là est la difficulté) à un endroit précis... dont on connait la position absolue :p

Considérer "absolute c'est le mal absolute" (bravo au fait du jdm) est du même ressort que l'amalgame "si tu fait du javscript, fais du jQuery"... C'est simplement qu'il faut bien utiliser les règles existantes, et dans le cas présent, cela peut -être adapté (avec la limite due aux écrans de petite taille et le risque de superposition des div latérales sur la div centrale si l'écran n'est pas assez large). Mais ca, c'est un choix du développeur (enfin, du designeur), donc, c'est "ni bien ni mal", c'est juste un choix.

[niahoo]

Certes, certes, c'était histoire de faire un bon mot. Généralement tu as toujours un stagiaire qui te fait une intégration nickel tout en absolu et puis tu regardes le site sur ton propre écran, qui n'a pas la même largeur que le sien. Et du coup les div sont positionnée au petit bonheur à la chance en fonction des lest et right qu'il a spécifiés

Ensuite c'est vrai que par rapport a un élément parent je m'en suis servi pas mal, mais j'avais même oublié ce principe !