28172 sujets

CSS et mise en forme, CSS3

Décalage position absolute et width 100 %

Bonjour à tous, j'ai un petit problème de placement, voilà mon problème :
J'ai deux blocs un a gauche de 250px et un à droite qui doit prendre les 100% du reste de la page.
Le souci est que une fois le bloc de droite positionné il dépasse de 250px à droite.
le code css : 
#div1{
width:250px;
height:100px;
position:absolute;
top:0px;
left:0px;
}
#div2{
width:100%;
height:100px;
position:absolute;
top:0px;
left:250px;
}

et le code html : 
<div id="div1"></div>
<div id="div2"></div>

Merci d'avance pour votre aide ! Smiley cligne
Administrateur
Bonjour,

Si tu indiques que le bloc doit avoir un width 100%, ce sera forcément toute la largeur de son référent (à priori la page entière), et non "100% du reste de la page".

Ce que tu tentes de réaliser me semble extrêmement hasardeux et complexe en choisissant un positionnement hors du flux tel que le positionnement absolu.

Quelle est ta contrainte ayant induit ce choix particulier de positionnement ?

EDIT : j'en profite pour faire de l'auto-promo : http://blog.goetter.fr/post/13556565063/width-100-tu-es-le-mal Smiley smile
Modifié par Raphael (02 Dec 2011 - 17:19)
Je réalise une interface d'administration pour mes prochains clients, et j'ai voulue reproduire à peut près la nouvelle interface de gmail.
J'ai finalement réussie voilà le code finale, dit moi ce que tu en pense : 
<body>	
	<div id="header"></div>
	<div id="tools"></div>
	<div id="conteneur">
		<div id="left-content"></div>
		<div id="right-content"></div>
	</div>	
</body>


#header {
	height: 60px;
	background: #2e2e2e;
}

#tools {
	height: 60px;
	border-bottom: 2px solid #ababab;
}

#left-content {
	width:250px;
	height:400px;
	background: whiteshadow;
	border-right: 2px solid #ababab;
	float: left;
}
#right-content {
	width: auto;
	height:100px;
	background: blue;
	overflow: hidden;
}

#conteneur {
	overflow: auto;
}


Le seule problème qu'il me reste c'est que les blocs ne sont pas calé sur la gauche et la droite et le premier bloc en haut n'est pas collé au top.
Si tu a une meilleur solution je suis preneur !
Ok merci mais j'ai trouver la solution à mon petit problème !
edit : les gabarits proposé ne prenne pas l'intégralité de la page hors ce que je veux faire c'est une interface full ecran.
screen shot
Modifié par epic3000 (02 Dec 2011 - 21:27)
Sujet clos
Aller à