28172 sujets

CSS et mise en forme, CSS3

Bloc qui se met en bas de page

Bonjour,

alors voilà ma situation, j'ai une page avec un menu sur la gauche, qui est positionné en float left avec une largeur de 160px, et un contenu principale sur la droite avec un margin-left de 170px et une largeur fixe.

Le problème se situe dans le conteneur principal, qui dès que j'ajoute un spacer (clear:both) après des éléments flottants, me met tout ce qui suit le spacer en pied de page.

Petit exemple 

<div style="float:left; width:100px;">b1</div>
<div style="margin-left:110px;">b2</div>
<div style="clear:both;"></div>
<div>b3</div>


ici b1 et b2 sont bien cote à cote, mais b3 se retrouve tout en bas de la page ! (en faite au même niveau que le menu de gauche qui est assez long)

merci pour votre aide, parce que ca fait des jours que je ne trouve pas de solutions !
clear:both; // après un float:left et/ou un float:right

both signifiant "les deux" en gros.

Dans ton cas, tu ne dois pas mettre les deux :

Tu as donc

clear:left;
clear:right;

A priori, c'est 
clear:right;

que tu cherches.
voilà le résultat avec le clear:right;
upload/41991-Sans-titre.jpg

je rajoute un peu de code pour que se soit plus clair :


<div id="menu">
	
</div>
        
        <div id="content">
            <div id="page_user">
            	<div>Derniers articles lus</div>
                    <div class="dernier_article_img">
                        <img src="article_neige.jpg" width=100 />
                    </div>
                    <div class="dernier_article_txt">
                        De nouvelles normes....
                    </div>
                    <div style="clear:right;"></div>
                    <div class="dernier_article_img">
                        <img src="article_neige.jpg" width=100 />
                    </div>
                    <div class="dernier_article_txt">
                        De nouvelles normes....
                    </div>
                    <div style="clear:right;"></div>
            </div><!-- fin page user -->
        </div><!-- fin content -->




#menu
{
	width:160px;
	float:left;	
}
#content
{
	margin-left:170px;
	width:1300px;
}
.dernier_article_img
{
	position:relative;
	float:left;	
	width:100px;
}
.dernier_article_txt
{	
	margin-left:110px;
	max-width:590px;
}
Tu peux laisser clear:both;

par contre tu dois englober (mettre dans un div) le code suivant


<div>
                    <div class="dernier_article_img">

                        <img src="article_neige.jpg" width=100 />

                    </div>

                    <div class="dernier_article_txt">

                        De nouvelles normes....

                    </div>

                    <div style="clear:right;"></div>

                    <div class="dernier_article_img">

                        <img src="article_neige.jpg" width=100 />

                    </div>

                    <div class="dernier_article_txt">

                        De nouvelles normes....

                    </div>

                    <div style="clear:right;"></div>
</div>
merci, mais rien n'y fait Smiley ohwell ca ne bouge pas, et si je remet clear:both le second bloc s'affiche tout en bas de la page Smiley ohwell

je comprend vraiment pas d'où ça vient !
J'ai simplifié au max mon code pour tester :


<body>

<div style="width:160px;float:left;">

            <div style="height:500px; background-color:black;"></div>
        </div>
        
        <div style="margin-left:170px;">
            <div>
                        <div style="width:100px; float:left;">
                            <img src="article_neige.jpg" width=100 />
                        </div>
                        <div style="margin-left:120px;">
                            De nouvelles normes....
                        </div>
                        <div style="clear:both;"></div>
                        <div style="width:100px; float:left;">
                            <img src="article_neige.jpg" width=100 />
                        </div>
                        <div style="margin-left:120px;">
                            De nouvelles normes....
                        </div>
                </div>
        </div><!-- fin content -->
</body>
</html>
seb888 a écrit :
Bonjour,

alors voilà ma situation, j'ai une page avec un menu sur la gauche, qui est positionné en float left avec une largeur de 160px, et un contenu principale sur la droite avec un margin-left de 170px et une largeur fixe.

Si je compte bien ça fait que 2 éléments div ça
seb888 a écrit :

Le problème se situe dans le conteneur principal, qui dès que j'ajoute un spacer (clear:both) après des éléments flottants, me met tout ce qui suit le spacer en pied de page.


Oui c'est normal, c'est même comme ça que l'on fait des pieds de page sans qu'ils soient "poussé" sur la droite
seb888 a écrit :

Petit exemple 

<div style="float:left; width:100px;">b1</div>

<div style="margin-left:110px;">b2</div>

<div style="clear:both;"></div>

<div>b3</div>


ici b1 et b2 sont bien cote à cote, mais b3 se retrouve tout en bas de la page ! (en faite au même niveau que le menu de gauche qui est assez long)

merci pour votre aide, parce que ca fait des jours que je ne trouve pas de solutions !


Je ne comprend pas trop ce que tu veux faire exactement, un bloc à gauche et deux bloc l'un au dessus de l'autre à droite ?

edit:
Sinon en gros clear:both désactive le float et donc les éléments qui suivent se mettent dans le flux, donc si c'est des éléments bloc (comme les div) ils se mettent les uns après les autres selon un flux descendant.
Modifié par mwspimiento (10 Feb 2012 - 23:15)
Sujet clos
Aller à