28172 sujets

CSS et mise en forme, CSS3

[Résolu] Corps extensible en hauteur (Contenu gauche Sidebar droite)

Bonjour à tous,

Cela fait presque 5 heures que je m'active à essayer de rendre le corps de mon design extensible (sa taille variant en fonction de son contenu, qui est variable).

Ce corps est organisé en deux parties : la partie gauche (contient les news) et la partie droite (la sidebar). J'aimerais que mon design s'étende verticalement en fonction de la partie gauche (les news), et que la sidebar, quant à elle, prenne la taille totale du corps.
J'ai un header et une bannière collés au dessus du corps, et un footer collé en dessous.

La page en question : www.wankil.fr

Ma page est organisée de la façon suivante :


<div id="page">
    <div id="top">Le header et ce qu'il contient</div>
    <div id="bannière"> La bannière </div>
    <div id="contenu"> Le corps que j'aimerais voir s'étendre en fonction de la div contenugauche
        <div id="contenugauche"> Les news (il y en a 3 par page, leur longueur varie...) </div>
        <div id="contenudroite"> La sidebar que j'aimerais voir s'étendre pour prendre toute la hauteur de la div contenu. </div>
    </div>
    <div id="footer"> Le footer et ce qu'il contient </div>
</div>


Voici pour le css (ce qui nous intéresse pour mon problème principalement)


body{
	margin:0;
	padding:0;
	background-color: #222222;
	font-family:Arial, Geneva, sans-serif;
	font-size:11px;
	color:white;
}

div#page {
	width:1024px;
	margin: 0 auto;
	min-height: 100%;
	position:relative;
}

#contenu{
	background:url(design/backgroundcontenu.jpg) repeat-y 0;
	margin: auto;
	width:1024px;
	height:1px;
}

#contenugauche{
	width:702px;
	padding:30px 30px 30px 40px;
	float:left;
}

#contenudroite{
	width:248px;
	float:left;
}


Mon code est peut-être un peu brouillon, mais je n'ai que peu d'expérience dans le css, et j'ai effectué énormément de test en suivant plusieurs tutoriels... Veuillez donc m'excuser si ce n'est pas très clair.

Voilà donc là où j'en suis, et où je n'arrive plus à avancer Smiley sweatdrop .
J'espère que vous pourrez m'aider, si vous avez besoin de renseignements divers, n'hésitez pas.
Modifié par DarkLink (19 Aug 2009 - 15:54)
Bonjour,

En lecture rapide, je dirais qu'il faut rajouter overflow:hidden; sur #contenu (enfin peut-être, car tu n'explique pas vraiment le problème).

Par contre quel est l'intérêt de metre #page en position:relative ?
Je pensais justement à le supprimer, car je crois que ça vient d'un des nombreux tutoriels que j'avais essayé de suivre... c'est que je commence à m'embrouiller dans tout ça.
J'ai enlevé le position:relative.

Pour le overflow:hidden, non, car en fait j'aimerais ne pas avoir une scrollbar, mais une page qui s'étend en fonction du contenu.

Je suis actuellement entrain d'effectuer divers tests dans mon css, du coup la page peut changer, ne soyez pas surpris :°.
Salut,

Pour que #contenu prenne la hauteur des div, c'est overflow:hidden; comme elle te l'as dit.

Pour que tes deux colonnes aient la même hauteur va voir ce gabarit : Gabarit 07
Vous aviez raison !

Quelques petits tests en suivant le Gabarit 07, un overflow:hidden, et hop.

Merci à vous deux, sujet résolu.
Modifié par DarkLink (19 Aug 2009 - 15:54)
DarkLink a écrit :
Pour le overflow:hidden, non, car en fait j'aimerais ne pas avoir une scrollbar, mais une page qui s'étend en fonction du contenu.


C'est justement le but, hidden = caché
Sujet clos
Aller à