casse-tête pour moi

[Celine]

bonjour tout le monde !

je suis débutante dans le développement(je suis actuellement en stage)

depuis trois jours j'essaie désespérément d'aligner 3 div(sidebar,content,puis sidebarright)et je ny arrive pas ,soit elles ne sont pas dans le bonne ordre,soit elles sont décalés à moment jai crue avoir réussi puisquelles étaient aligné mais finalement ma sidebar sortait du bas de la page,jai mis « height :auto ; »dans ma css mais ca na pas marcher non plus je sais pas trop quoi vous mettre car ma css fait plusieurs pages et mon code et plutôt long aussi.

le site :discount-promo

jespère que quelquun pourra maider (dites moi quelles sont les bouts de codes que vous avez besoin de voir ,je les posteraient)

merci beaucoup a tout ce qui pourront me donné un coup de main

Céline

[Celine]

je précise que je suis allez voir la discussion:trois colonnes

mais rien ne marche du moins je n'arrive pas à ce que ça marche.

[Dan]

Bonjour Celine,

C'est assez logique vu que tu mets ta <div id="content"> qui n'a pas la propriété "float" au début (avant <div id="sidebar"> et <div id="sidebarright">)

Cela te fait donc un saut de ligne après cette <div>.

Tu devrais mettre ces 3 divs dans l'ordre, soit:

sidebar, content et sidebarright, toutes les trois en float:left et à l'itérieur de <div id="wrapper">

Dan

PS: et puisque tu es chez Katsu, remets donc mon bonjour à Sylvain

[Celine]

merci dan ,

mais le probleme c'est que ceci

Tu devrais mettre ces 3 divs dans l'ordre, soit:

sidebar, content et sidebarright, toutes les trois en float:left et à l'itérieur de <div id="wrapper">

etait la stucture du code jusqu'à maintenant mais mon travail(pour le référencement du site) est de faire passer content juste apres le header,mais maintenant que c'est fait il faut que je fasse que l'affichage du site soit le meme qu'avant

ps:effectivement je suis en stage chez katsu ,je passerais le bonjour à Sylvain.

[Dan]

Dans ce cas, il faut travailler en positionnement absolu et non en float.

Cela ne peut se faire que si tes divs ont toutes des largeurs fixes.

[Celine]

C'est assez logique vu que tu mets ta <div id="content"> qui n'a pas la propriété "float" au début (avant <div id="sidebar"> et <div id="sidebarright">)

Cela te fait donc un saut de ligne après cette <div>.

comment puis-je enlevé ce saut de ligne?j'ai trouver plein de choses mais rien ne marche

ici

et ici

et aussi ici

y a encore d'autre chose que j'ai essayé mais je trouve plus ou c'est,voila merci pour les futurs réponses

[Celine]

bonjour,

body 
{
	font: 78.5%/1.6em "Lucida Grande", "Lucida Sans Unicode", verdana, geneva, sans-serif;
	word-spacing:2px;
	color:#0000;
	margin:20px 0px 20px 0px;
	background:url(images/body.jpg) top repeat-x #FF00A2;
	background-attachment:fixed;

}
* 
{
	margin:0;
	padding:0;
}
#wrapper 
{
	background:#fff;
	border:3px solid #FF00A2;
	width:980px;
	margin:0 auto;
}
* html #wrapper
{
	width:980px;
}
#innerwrapper
 {
	width:960px;
	margin:1px;
	background:#ffffff;
	padding:10px;
}


...



#cont-side-right
{
width:960px;
}
#cont-side
{
width:770px;
}
#sidebar 
{
	float:left;
	color:#666;
	padding:10px 0px 0px 20px;
	width:190px;
}


......



#sidebarright 
{
	height:200px;
	float:right;
	width:190px;
	background:#F7F7F7;
	padding:10px 0 0 20px;
}

Voilà ma css avec laquelle mes div sont enfin correctement positionnées, maintenant gros problème mes block ne s’agrandissent pas lorsque leur contenu lui s’agrandit comment faire help s.v.p. !

[Celine]

coucou tout le monde ,

ça y est j'ai enfin résolu mon probléme!

je vous met ma solution...

je vous met ce que j'ai ajouté par rapport à celle que je vous avez fourni avant:

body
{    
  min-height:100%;  
}
#wrapper
 {
 min-height:100%;
}
* html #wrapper
 {
height:auto;
}
...

#cont-side-right
{
height:auto;
}
#cont-side
{
height:auto;
float:left;
}
......

#content 
{
width:520px;
float:right;
padding:20px 0 0 20px;
height:auto;
}

<div id="wrapper">
    <div id="innerwrapper" >	    
        <div id="header">
        </div>
        <div id="cont-side-right" >
            <div id="cont-side" >
                <div id="content" >
                </div>	
                <div id="sidebar" >
                </div>	
           </div>
           <div id="sidebarright" >
           </div>	
       </div>
        <div id="footer">
        </div>	
    </div>
</div>