Menu/Css/Html/jQuery

au vue de l'imprim ecran je dirai qu'il manque des div clear ( <div class="clear"></div> pour la partie html et dans le css => .clear{clear:both;} ) à placer après des éléments qui sont en float left ou right pour que les elements suivant ne soient pas en float.

Bonjour,

Vous n'êtes pas la première personne qui me dit de mettre des clear:both;

Voyez par vous même :

<div id="contenu"> 
                <div class="sousmenu menu1"> <!-- debut menu 1 -->
                    <div class="liens">
                        <p><img src="images/template/icone.png" alt="icone" /> LIEN 1 <br /> <img src="images/template/icone.png" alt="icone" /> LIEN 2 <br /> <img src="images/template/icone.png" alt="icone" /> LIEN 3 <br /> <img src="images/template/icone.png" alt="icone" /> LIEN 4 </p>
                     </div>
                    <div class="onglet"></div>
                </div> <!-- fin menu 1 -->
                <div class="clear"></div>
                <div class="sousmenu menu2"> <!-- debut menu 2 -->
                     <div class="liens">
                        <p><img src="images/template/icone.png" alt="icone" /> LIEN 1 <br /> <img src="images/template/icone.png" alt="icone" /> LIEN 2 <br /> <img src="images/template/icone.png" alt="icone" /> LIEN 3 <br /> <img src="images/template/icone.png" alt="icone" /> LIEN 4 </p>
                      </div>
                       <div class="onglet"></div>
                </div> <!-- debut menu 2 -->
        <div class="clear"></div>
                <div class="sousmenu menu3"> <!-- debut menu 3 -->
                       <div class="liens">
                        <p><img src="images/template/icone.png" alt="icone" /> LIEN 1 <br /> <img src="images/template/icone.png" alt="icone" /> LIEN 2 <br /> <img src="images/template/icone.png" alt="icone" /> LIEN 3 <br /> <img src="images/template/icone.png" alt="icone" /> LIEN 4 </p>
                        </div>
                        <div class="onglet"></div>
                </div> <!-- fin menu 3 -->

            <div class="clear"></div>
            <!-- rectangle du milieu de page -->
            <div class="page-div-shadow">

                        <h3>Mon tableau de bord</h3>

                        <hr />

                        <p>
                        Scripserit est temporibus nihil quia,<br /><br />
                        Metuentes igitur idem latrones Lycaoniam magna parte campestrem cum se inpares nostris fore congressione stataria documentis 
                        frequentibus scirent, tramitibus deviis petivere Pamphyliam diu quidem intactam sed timore populationum et caedium, milite per 
                        omnia diffuso propinqua, magnis undique praesidiis conmunitam.<br /><br />
                        Ob haec et huius modi multa, quae cernebantur in paucis, omnibus timeri sunt coepta. et ne tot malis dissimulatis paulatimque 
                        serpentibus acervi crescerent aerumnarum, nobilitatis decreto legati mittuntur: Praetextatus ex urbi praefecto et ex vicario 
                        Venustus et ex consulari Minervius oraturi, ne delictis supplicia sint grandiora, neve senator quisquam inusitato et inlicito 
                        more tormentis exponeretur.<br /><br />
                        Quapropter a natura mihi videtur potius quam ab indigentia orta amicitia, applicatione magis animi cum quodam sensu amandi quam 
                        cogitatione quantum illa res utilitatis esset habitura. Quod quidem quale sit, etiam in bestiis quibusdam animadverti potest, quae ex 
                        se natos ita amant ad quoddam tempus et ab eis ita amantur ut facile earum sensus appareat. Quod in homine multo est evidentius, primum
                        ex ea caritate quae est inter natos et parentes, quae dirimi nisi detestabili scelere non potest; deinde cum similis sensus exstitit amoris, 
                        si aliquem nacti sumus cuius cum moribus et natura congruamus, quod in eo quasi lumen aliquod probitatis et virtutis perspicere videamur.<br /><br />
                        Quid? qui se etiam nunc subsidiis patrimonii aut amicorum liberalitate sustentant, hos perire patiemur? An, si qui frui publico non potuit per hostem, 
                        hic tegitur ipsa lege censoria; quem is frui non sinit, qui est, etiamsi non appellatur, hostis, huic ferri auxilium non oportet? Retinete igitur in 
                        provincia diutius eum, qui de sociis cum hostibus, de civibus cum sociis faciat pactiones, qui hoc etiam se pluris esse quam collegam putet, 
                        quod ille vos tristia voltuque deceperit, ipse numquam se minus quam erat, nequam esse simularit. Piso autem alio quodam modo gloriatur se brevi 
                        tempore perfecisse, ne Gabinius unus omnium nequissimus existimaretur.<br /><br />
                        Eius populus ab incunabulis primis ad usque pueritiae tempus extremum, quod annis circumcluditur fere trecentis, circummurana pertulit bella, ......            
                        </p>

                        <h3>Mon tableau de bord</h3>

                        <hr />

                        <p>
                        Scripserit est temporibus nihil quia,<br /><br />
                        Metuentes igitur idem latrones Lycaoniam magna parte campestrem cum se inpares nostris fore congressione stataria documentis 
                        frequentibus scirent, tramitibus deviis petivere Pamphyliam diu quidem intactam sed timore populationum et caedium, milite per 
                        omnia diffuso propinqua, magnis undique praesidiis conmunitam.<br /><br />
                        Ob haec et huius modi multa, quae cernebantur in paucis, omnibus timeri sunt coepta. et ne tot malis dissimulatis paulatimque 
                        serpentibus acervi crescerent aerumnarum, nobilitatis decreto legati mittuntur: Praetextatus ex urbi praefecto et ex vicario 
                        Venustus et ex consulari Minervius oraturi, ne delictis supplicia sint grandiora, neve senator quisquam inusitato et inlicito 
                        more tormentis exponeretur.<br /><br />
                        Quapropter a natura mihi videtur potius quam ab indigentia orta amicitia, applicatione magis animi cum quodam sensu amandi quam 
                        cogitatione quantum illa res utilitatis esset habitura. Quod quidem quale sit, etiam in bestiis quibusdam animadverti potest, quae ex 
                        se natos ita amant ad quoddam tempus et ab eis ita amantur ut facile earum sensus appareat. Quod in homine multo est evidentius, primum
                        ex ea caritate quae est inter natos et parentes, quae dirimi nisi detestabili scelere non potest; deinde cum similis sensus exstitit amoris, 
                        si aliquem nacti sumus cuius cum moribus et natura congruamus, quod in eo quasi lumen aliquod probitatis et virtutis perspicere videamur.<br /><br />
                        Quid? qui se etiam nunc subsidiis patrimonii aut amicorum liberalitate sustentant, hos perire patiemur? An, si qui frui publico non potuit per hostem, 
                        hic tegitur ipsa lege censoria; quem is frui non sinit, qui est, etiamsi non appellatur, hostis, huic ferri auxilium non oportet? Retinete igitur in 
                        provincia diutius eum, qui de sociis cum hostibus, de civibus cum sociis faciat pactiones, qui hoc etiam se pluris esse quam collegam putet, 
                        quod ille vos tristia voltuque deceperit, ipse numquam se minus quam erat, nequam esse simularit. Piso autem alio quodam modo gloriatur se brevi 
                        tempore perfecisse, ne Gabinius unus omnium nequissimus existimaretur.<br /><br />
                        Eius populus ab incunabulis primis ad usque pueritiae tempus extremum, quod annis circumcluditur fere trecentis, circummurana pertulit bella, ......            
                        </p>

            </div>
        </div>

         <div class="clear"></div>

J'en ai mis partout, mais peu a peu et au final. Même avec ce code, je n'ai rien qui change. Tout reste comme sur l'image montré ! =/

Pensez vous que je pourrais faire autre chose ? =S

<u>Petit EDIT :</u>
Euh. Et pour les "clear:", j'en ai un entre le menu de droite et le contenu de gauche.

.page-div-shadow
{
    width : 850px;
    border : 1px solid #bababb;
    margin-left : 55px;
    margin-top: 10px;
    clear: right;
    position : relative;
}

Clear : right;
Normalement ca fonctionne. Du moins sur toutes les versions récentes...

Du petit nouveau,

Voici après quelques expériences ce que j'ai :
Début du screen
Fin du screen

Voici ce que j'ai modifier :

function getGauche(){
                    var left = $("#contenu").offset().left; // Le classe wrapper c'est la classe ou tu veux l'alignement gauche!
                    $(".sousmenu").css('left', left+'px');
            }

            $(document).ready(function() {
                    $(".onglet").click(function() { // Un onglet est cliqué
                        var lien = $(this).parents(".sousmenu"); // L'onglet fait partie de quel sousmenu?
                                lien = lien.children(".liens"); // Je récupere le composant .liens du sousmenu en question

                        if(!$(this).hasClass("ouvert")) { // On vérifie si l'onglet est fermé
                                        $(this).addClass("ouvert"); // On précise qu'on ouvre l'onglet, une classe permet de chercher l'image dans le CSS et donc du cache
                                        lien.css({'border':'1px solid black', 'border-left':'0'}).animate({'width':'190px'}); // On ouvre les liens en question
                            } else { // Si l'onglet est fermé
                                        $(this).removeClass("ouvert"); // On précise qu'on ferme l'onglet
                                         lien.animate({'width':'0px'},function () { // On ferme les liens
                                            $(this).css('border', 'none'); // On enleve les bordures pour l'esthétique
                                         });
                            }

                    });
            });

.sousmenu{
    display : block;
    width: 242px;
    position: absolute;
    left:0;
    clear: both;
    margin-top:19px;
    z-index:2;
}
.liens{
    float: left;
    width: 0px;
    height : 210px;
    border: 0;
    background-color : #F4F2F3;
    margin-top:7px;
    padding:5px;
    overflow:hidden;
    margin-left:1px;
}
.liens p{
    margin: 0;
    width: 190px;
    overflow:hidden;
}
.onglet{
    float:left;
    height:220px;
    width:40px;
    height:239px;
    margin-left: -12px;
}
.menu1 .onglet {
    top: 100px;
    background-image : url("../../images/template/mon-compte.png");
}
.menu2 .onglet {
    top: 200px;
    background-image : url("../../images/template/formation.png");
}
.menu3 .onglet {
    top: 300px;
    background-image: url("../../images/template/CarnetDeBord.png");
}
.menu1 .ouvert {
    top: 100px;
    background-image: url("../../images/template/mon-compte2.png");
}
.menu2 .ouvert {
    top: 200px;
    background-image: url("../../images/template/formation2.png");
}
.menu3 .ouvert {
    top: 300px;
    background-image: url("../../images/template/CarnetDeBord2.png");
}
/* ------------------------ DIV DU CONTENU MILIEU ---------------------------- */
.page-div-shadow
{
    width : 850px;
    border : 1px solid #bababb;
    margin-left : 55px;
    margin-top: 10px;
    clear: right;
    position : relative;
}

Cependant, je n'arrive toujours pas à avoir chaque menu, l'un en dessous de l'autre... Une idée ?
A la limite, pour IE6, je ne demande même pas d'avoir mon menu dans le conteneur.

Merci d'avance et merci de l'attention que vous portez à mon soucis,
Tubasa