28172 sujets

CSS et mise en forme, CSS3

Problème mise en page

Bonsoir, je crée actuellement mon blog à l'aide de wordpress et je refais tout le thème, seulement un problème survint! Smiley eek
Les pages sont codées en php mais je vous copie-colle le code HTML nécessaire, j'espère, pour comprendre le problème... Le problème: Sous IE, il n'y a pas de prob ( incroyable ), mais sous firefox, ma div "page" qui contient en gros tout sauf le header et le footer, apparaît mais le fond blanc ne s'affiche pas... Pour essayer de comprendre d'ou venait le problème, j'ai ajouté un border de 2 px pour " voir " la boîte et surprise, sous firefox la bordure ne contient rien et reste collée sous le header.

J'ai cherché pendant un bon moment et j'ai pas trouvé, donc voila le code, c'est surement un truc con:

<body>

<div id="header">
blablabla
</div>

<div id="page">
	<div id="content" class="narrowcolumn">		
			<div class="post" id="post-8">
                            blablabla
                        </div>

		        <div class="navigation">
			   <div class="alignleft"></div>
			   <div class="alignright"></div>
		        </div>
         </div>

	<div id="sidebar">

        </div>


</div>
<div id="footer">
</div>

</body>

</html>


La partie du CSS qui nous intéresse


body {
	margin: 0 0 20px 0;
	padding: 0; 
	}
#page {
background: url("images/haut_page.png") no-repeat 0px 0px white;
background: url("images/haut_page_ie.png") no-repeat 0px 0px white !important!;
text-align: left;

margin: 0 auto;
margin-top:2px;
width: 849px;
}


Je précise que le hack CSS n'est pas la cause du bug et s'il vous faut une autre partie de code ou quoi que ce soit, no probleme.

Merci d'avance !
Salut,

Ca aurait été intéressant d'avoir les propriétés CSS de #content et #sidebar. S'ils n'apparaissent pas dans #page, c'est surement qu'ils sont sortis du flux, y'aurait pas des float par hasard ?
narrowcolomn correspond à content, donc voici le code et il y a effectivement des balises float... aussi dans la sidebar

.narrowcolumn {
	float: left;
	padding: 0 0 20px 45px;
	margin: 0px 0 0;
	width: 500px;
	}


#sidebar
{
	padding: 20px 0 10px 0;
	float: right;
	padding-right: 10px;
	position: relative;
	width: 267px;
	}


Voila, j'ai du mal à réfléchir, donc j'attends encore une chaleureuse réponse dans l'espoir d'en avoir une Smiley smile
bonjour

il faut simplement cloturer les float pour englober les flottants dans le flux, par exemple comme ceci :

ajoute juste AVANT le </div> correspondant à <div id="page">

<div style="clear:both"></div>
Sujet clos
Aller à