28173 sujets

CSS et mise en forme, CSS3

Salut,

j'ai un petit soucis sous firefox sur un bout de code très simple :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
	<title></title>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<meta http-equiv="Content-Script-Type" content="text/javascript" />
	<meta http-equiv="Content-Style-Type" content="text/css" />
	<style>

body {
	float:left
}

table {
	width: 100%;
}

#traca {
	border: 2px solid black;
	padding: 2px;
	float:left;
	width: 432px;
}

#details {
	border: 2px solid black;
	padding: 2px;
	float: left;
	width: auto
}
</style>
</head>
<body>
	<div id="traca">TEST</div>
	<div id="details">
		<table border="1"><tr><td>blabla</td></tr></table>
	</div>
</body>
</html>


Le but du jeu étant d'avoir un bloc fixe en width et de mettre l'autre à côté qui serait dynamique en width. Ca marche très bien sous IE mais pas du tout sous FF car le second block passe en dessous.
Modifié par NerOcrO (14 Sep 2007 - 09:20)
Bonsoir,
pas trop de temps d'expliquer en détail mais ça marche avec ce code:
regarde bien le code que j'ai ajouté et le commentaire:
<style type="text/css" media="screen">
<!--
#traca {
	border: 2px solid black;
	padding: 2px;
	float:left;
	width: 432px;
}
#details {
	border: 2px solid black;
	padding: 2px;
	margin-left: 440px;
	height: 1%; /* > propriété conférant le layout à placer idéalement dans un CSS pour IE via commentaire conditionnels > voi FAQ */
	}
table {
	border: 1px solid #00FF00;
	width: 100%;
	}
-->
</style>