28172 sujets

CSS et mise en forme, CSS3

Design fluide + clear : both + webkit

Bonjour Smiley biggrin ,

J'ai un petit gros soucis avec un gabarit "fluide" : colonne de gauche fixe, colonne de droite doit prendre le reste de l'écran.


<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Document sans nom</title>
<style type="text/css">
<!--
html {
	margin: 0;
	padding: 0;
}
body {
	margin: 0;
	padding: 0;
}
.center {
	width: 100%;
}
.column-1 {
	float: left;
	width: 219px;
	background: green;
}
.column-2 {
	margin: 0 10px 0 229px;
	padding: 10px;
	background: red;
	width: auto;
}
.bloc {
	width: 20%;
	float: left;
	background: #fff;
	padding: 10px;
	margin: 0 10px;
}
-->
</style>
</head>
<body>
<div class="center">
	<div class="column-1"> Lorem ipsum</div>
	<div class="column-2">
		<div class="bloc">Lorem ipsum dolor</div>
		<div class="bloc">Lorem ipsum dolor</div>
		<div style="clear: left"></div>
	Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vel felis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. 
	</div>
</div>
</body>
</html>

A l'intérieur de .column-2 j'ai deux éléments flotés, pour descendre le flux j'ai rajouté <div style="clear: left"></div> , classique.


http://img4.hostingpics.net/thumbs/mini_260084bug.jpg

Mais le problème c'est que ça redescend le flux en bas de la column-1, je rajoute un overflow: hidden sur column-2 et c'est corrigé sur IE/FF uniquement.

Rendu souhaité =
http://img4.hostingpics.net/thumbs/mini_592442souhaite.jpg

Pour que ça soit bon dans tous les navigateurs il faut fixer une largeur a column-2, chose que je ne peux pas faire qu'il faut impérativement que cette colonne prenne le reste de l'écran.

Ce qui est lourd c'est que le width: auto chez webkit (safari + chrome) et Opera dans mon cas n'est pas géré de la même manière qu'IE/FF :
- IE/FF = 100% - margin-left
- Opera/Safari = 100% - margin-left x2

Je pourrais m'arranger pour utiliser un hack safari + opera, mais je n'ai pas de hack sur safari 4, et je préfère autant une solution + propre.

J'ai trouvé quelques solutions sur le forum, mais ça revient systématiquement à fixer en px la largeur de la colonne ou mettre des min/max-width. Smiley confus

Est-ce qu'il existe une solution pour que la navigateur calcul lui même la largeur, genre 100% (width px de l'écran) - 229px = xxxx px ?

Merci de votre aide...une dernière chose = au secours.

Manu
Modifié par manuL (05 Mar 2009 - 19:22)
salut, tu veux ta barre de scroll à droite sur la page principal c'est ça ?

dans ce cas une fois la page supérieur à la hauteur de la fenetre du navigateur, elle apparaitra.

autrement tu as overflow: scroll, mais cette commande fait apparaitre les barres de défilement droite et inférieures.
hello,

Oui à droite, mais en fait c'est pas vraiment un problème de scroll, mais plutôt de calcule de largeur.

Voilà le "bug" avec Safari :
http://img5.hostingpics.net/thumbs/mini_249519webkit.jpg 


html {
	margin: 0;
	padding: 0;
}
body {
	margin: 0;
	padding: 0;
}
.center {
	width: 100%;
}
.column-1 {
	float: left;
	width: 219px;
	background: green;
}
.column-2 {
	margin: 0 10px 0 229px;
	padding: 10px;
	background: red;
	overflow: hidden;
	width: auto;
}
.bloc {
	width: 20%;
	float: left;
	background: #fff;
	padding: 10px;
	margin: 0 10px;
}


Comment faire en sorte que le bloc rouge aille jusqu'au bord droit de la fenêtre sous safari 4 ? Smiley sweatdrop
Sujet clos
Aller à