Newbee - template fluide à 100% avec des DIV

Recherche :

Mot : Pseudo : Filtrer
Bas de page
Auteur	Sujet : Newbee - template fluide à 100% avec des DIV

Dwinanea

Bonjour

Je voudrais faire un 'layout' avec un header qui prend 100% de la largeur et 70px de haut.
Dessous, deux colonnes l'une à côté de l'autre. L'une faisant 210px de large et l'autre, prenant le reste.
Ces deux dernière colonnes devraient prendre la hauteur restante disponible.

Cependant, lorsque je code ceci, ça ne marche pas. Si je met height: 100% dans mes styles de mes deux conteneurs du bas, il me prend bien 100%, mais en sus des 70px du header, ce qui occasion des 'scrollbars' sur le côté. De plus, lorsque le contenu dépasse les 100%, la couleur de fond ne suit pas :cry:

Es-ce que vous pouvez m'aider ??

voici un aperçu :

Code :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<style>
html, body {
margin: 0;
padding: 0;
background-color: #fff;
height: 100%;
}
#wrapper {
background-color : #c0c0c0;
height : 100%;
width : 100%;
}
#header {
background-color : #fff;
height: 70px;
}
#menu {
position: absolute; top: 70px; left: 0px; bottom: 0px;
background-color : #e5e5e5;
width : 210px;
float: left;
}
#content {
position: absolute; top: 70px; left: 210px; bottom: 0px right: 0px;
background-color : #c0c0c0;
float: left;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="header">
header
</div>
<div id="menu">
menu
</div>
<div id="content">
content 2
</div>
</div>
</body>
</html>

Merci de votre aide

Publicité

gebruik

Un élément placé en float sort du flux de lecture et n'est pas pris en compte par l'élément parent dans le cas ou celui-ci n'auraient pas de dimension explicite.
Il convient donc de placer ce que l'on appelle un spacer, simple balise <div> contenant un espace insécable qui aura pour propriété clear:both en CSS.

Message cité 1 fois

mIRROR

Chevreuillobolchévik

solution pas tres semantique (div vide)
il vaut mieux appliquer un contexte de formatage sur le conteneur
il y a plusieurs solutions:
http://www.blog-and-blues.org/arti [...] _formatage
le mieux reste d utiliser overflow pour FF
pour ie il faut mettre le flag hasLayout a true et la facon la plus transparente d y arriver est zoom:1

---------------
« The enemy is the gramophone mind, whether or not one agrees with the record that is being played at the moment. » — George Orwell

avander

gebruik a écrit :

Un élément placé en float sort du flux de lecture et n'est pas pris en compte par l'élément parent dans le cas ou celui-ci n'auraient pas de dimension explicite.
Il convient donc de placer ce que l'on appelle un spacer, simple balise <div> contenant un espace insécable qui aura pour propriété clear:both en CSS.

Autant mettre un <hr /> alors...

mIRROR

Chevreuillobolchévik

non autant foutre un contexte de formatage [:dawak]

---------------
« The enemy is the gramophone mind, whether or not one agrees with the record that is being played at the moment. » — George Orwell

FORUM HardWare.fr

Programmation

HTML/CSS

Newbee - template fluide à 100% avec des DIV

Sujets relatifs
Cacher un bloc DIV pendant le chargement	DIV horizontales dans une DIV cadre servant de masque
Système de template : ais je bien compris ?	[CSS] 100% - 100px
Div et CSS.... : Problèmes de longueurs	Problème avec les height 100%
debordement sur un DIV	Problème de position de <DIV>
[Résolu]Regex inférieure à 100	[PHP] System de template PHPbb3 de l'aide svp :)
Plus de sujets relatifs à : Newbee - template fluide à 100% avec des DIV

Page générée en 0.064 secondes