28173 sujets

CSS et mise en forme, CSS3

Problème avec CSS

Bonjour,
j'ai un souci avec ma structure, je voulais faire quelque chose de simple, header menu content et footer, ensuite j'ai mis 2 bloques dans #content, mais ça foire un peu quand je zoom.
j'ai un autre problème auquel je n'arrive pas à trouver de solution : #content n'est pas attaché à footer Smiley sweatdrop , pourtant j'ai mis un height de 100% Smiley ohwell 

<div id="container">
    <div id="header">header</div>
    <div id="menu">menu</div>
    <div id="content">
    	<div class="left-block">left-block</div>
        <div class="right-menu">right-menu</div>
	</div>
    <div id="footer">footer</div>
</div>


html,
body {
   margin:0;
   padding:0;
   height:100%;
}

#container {
   min-height:100%;
   position:relative;
   width:1000px;
   margin:auto;
}

#header {
   background:#ff0;
   padding:10px;
}

#menu {
	background-color: #0C3;
	padding: 10px;
	height: 100%;
}

#content {
	position:relative;
	background-color: #CCC;
	height: 100%;
}
#content .left-block{
	display:inline-block;
	position:relative;
	background-color: #FC0;
	height: 500px;
	width:670px;
}
#content .right-menu{
	display:inline-block;
	position:relative;
	background-color: #0CF;
	height: 500px;
	width:326px;
}

#footer {
   position:absolute;
   bottom:0;
   width:100%;
   height:60px; 
   background:#6cf;
}

Modifié par smith (28 Aug 2012 - 18:07)
Alors :
- Enlève les `display: inline-block' sur les blocs de #content et utilise plutôt :

#content .left-block {
	float: left;
	…
}


- L'usage de `position: absolute; bottom: 0;' sur le footer fait que, quelque soit la hauteur du contenu, le footer sera toujours en bas (d'où des risques de vide entre lui et le bloc précédent). Tu peux enlèver cette partie de code et le laisser dans le flux…
Muchos a écrit :

- L'usage de `position: absolute; bottom: 0;' sur le footer fait que, quelque soit la hauteur du contenu, le footer sera toujours en bas (d'où des risques de vide entre lui et le bloc précédent). Tu peux enlèver cette partie de code et le laisser dans le flux…

Merci pour l'info Smiley ravi

Muchos a écrit :
Alors :
- Enlève les `display: inline-block' sur les blocs de #content et utilise plutôt :

#content .left-block {
	float: left;
	…
}

J'ai pensé au float, mais ce qui me gène le plus, c'est que lorsque la taille de .left-block augmente, il déborde et dépasse #content
sur mon exemple .left-block et .right-menu possèdent un height fixe, mais en réalité j'aimerai qu'ils soient dynamique en fonction du contenu
Sujet clos
Aller à