Centrage d'un bloc

ronytexasranger
Les bases HTML/CSS

Bonjour,, j'ai un probleme de positionnement css que je n'arrive pas a resoudre, je voudrais tout simplement mettre le bloc noir au milieu de la page.
Voici le code css

body{
    background-color:#f7f7f7;
}
#wrapper{
    position:absolute;
    width:100%;
    top:0px;
    left:0px;
}
.center{
    margin:auto;
    padding:0px;
    width:1050px;
    height:auto;
}
#container{
    height:auto;
    width:960px;
    background-color:white;
    border-radius:4px;
    -moz-border-radius:4px;
    -webkit-border-radius:4px;
    float: left;
    text-align:left;
    margin:22px;
    padding:0 35px;
    border:2px solid #f4f4f4;
}
header{
    height:70px;
    padding:30px 0;
}
a#title{
    display:block;
    float:left;
}
#suivi{
    float:right;
}
#caroussel{
    height:264px;
    width:712px;
    background-color:black;
    border-radius:4px;
    -moz-border-radius:4px;
    -webkit-border-radius:4px;
    float: left;
    margin:0 auto;
    border:2px solid #f4f4f4;
}

Image

10 réponses

Babou

Il faut que tu rajoutes un width dans ton body ( en général tu mets la largueur la plus grosse que tu as dans toutes tes divs me semble il, sinon tu mets 100% ) et aussi un margin:auto;

ronytexasranger
Auteur

J'ai fait ce que tu ma dit mais mon bloc noir n'est toujours pas au milieu

Babou

c'est quel div sur ton CSS ?

ronytexasranger
Auteur

Sur mon css la div noir c'est celle avec l'id caroussel

Babou

Enlève le margin:0 auto; sur cette div

ronytexasranger
Auteur

Rien a faire ça ne change rien

djtec

Tu peux nous montrer ta structure Html stp

ronytexasranger
Auteur 
<body>
    <div id="wrapper">
        <div class="center">
            <div id="container">
                <header>
                    <a href="index.php" title="Home" id="title"><img src="webroot/images/titre.png"></a>    
                            <div id="suivi">
                    <a href="http://www.facebook.fr" title="facebook"><img src="webroot/images/facebook.png"></a>
                    <a href="http://fr.linkedin.com/" title="linkedin"><img src="webroot/images/linkedin.png"></a> </div>
                </header><!-- /header -->
                <section id="caroussel" class="caroussel">

                </section><!-- /caroussel -->
            </div>
        </div>
        <div class="center">
        <div id="resume">
            <h2>Notre but</h2>
                <div id="right"><img id="whoweare" src="webroot/images/who_we_are.png" alt="whoweare"></div>
            </div>
        </div>
    </div>
</body>
</html>
djtec

Et si tu enleve le float dans ta div caroussel

ronytexasranger
Auteur

Merci a toi djtec j'ai enlevé le float et ma div c'est centrée.