Allen,

Op de een of andere manier zie ik volgens mij iets over het hoofd. CSS is helaas niet mijn sterkste punt...
Ik was benieuwd of mensen mij konden helpen het volgende probleem te vinden.

Ik heb een serie van DIV's op 1 pagina. Hierin zit een div met daarin weer 2 div's. Die 2 moeten gecentreerd staan in de bevattende div.

Wat doe ik fout?

Code:

<div class="top">
</div>
<div class="subtop">
    <div class="logo">
        LOGO
    </div>
    <div class="menu">
        <a href="#">Home</a> | 
        <a href="#">Veilingitems</a> | 
        <a href="#">Doelen</a> | 
        <a href="#">Vrijwilligers</a> | 
        <a href="#">Contact</a>
    </div>
</div>

<div class="container">
    <div class="foto">
        <img src="https://www.sitedeals.nl/images/foto.png">
    </div>
    <div class="textballon">
        BALLON
    </div>
</div>

<div style="clear:both; font-size:1px;"></div>

<div class="willekeurig">
    <img src="https://www.sitedeals.nl/images/bank.png" />&nbsp;&nbsp;&nbsp;
    <img src="https://www.sitedeals.nl/images/luchtballon.png" />&nbsp;&nbsp;&nbsp;
    <img src="https://www.sitedeals.nl/images/tent.png" />
</div>

<div class="bottom">
    <b>Dorpsveiling Midwoud / Oostwoud - Zaterdag 20 April 2013 || Samen sterk voor een doel</b>
</div>

Code:

/* Algemene declaraties */
body  {
    background: #333;
    color: #000;
    font-family: Tahoma, Geneva, sans-serif;
    font-size: 11pt;
}

a:link, a:visited, a:active {
    color: #784a8a;
    text-decoration: none;
    font-size: 16pt;
}

a:hover {
    color: #784a8a;
    text-decoration: underline;
    font-size: 16pt;
}

/* Layout uitzetten */
div.top {
    width: 100%;
    background: #784a8a;
    height: 25px;
    border-top: 1px #000 solid;
    border-left: 1px #000 solid;
    border-right: 1px #000 solid;
    border-collapse: collapse;
}

div.subtop {
    width: 100%;
    background: #FFF;
    height: 100px;
    border-left: 1px #000 solid;
    border-right: 1px #000 solid;
    border-collapse: collapse;
}

div.logo {
    display:block;
    float:left;
    width:25%;
    height: 100px;
    text-align: center;
    line-height:100px;
}

div.menu {
    display:block;
    float:left;
    width:75%;
    height: 100px;
    text-align: center;
    line-height:100px;
}

div.container {
    width: 100%;
    height: 350px;
    background: #FFF;
    border-left: 1px #000 solid;
    border-right: 1px #000 solid;
    border-collapse: collapse;
    text-align: center;    
}

div.willekeurig {
    width: 100%;
    height: 175px;
    background: #FFF;
    border-left: 1px #000 solid;
    border-right: 1px #000 solid;
    border-collapse: collapse;
    text-align: center;
    line-height:175px;
    padding-top: 15px;
    padding-bottom: 15px;
}

div.bottom {
    width: 100%;
    background: #784a8a;
    height: 25px;
    border-bottom: 1px #000 solid;
    border-left: 1px #000 solid;
    border-right: 1px #000 solid;
    border-collapse: collapse;
    padding-left: 5px;
    line-height: 25px;
}

/*Home*/
div.foto {
    float:left;
    width:550px;
    text-align: right;
    height: 350px;
    margin-right: 15px;
}

div.textballon {
    float:left;
    width:320px;
    height: 348px;
    background: #f3f3f3;
    border: 1px solid #784a8a;
    border-collapse: collapse;
}

PS. Linkje: http://www.dorpsveiling.eu

.container {margin: 0 auto;} toevoegen

Stomme vraag misschien, maar waar moet ik dit toevoegen?:$

Origineel gepost door Willem 't Hart

.container {margin: 0 auto;} toevoegen

div.container {
width: 100%;
height: 350px;
background: #FFF;
border-left: 1px #000 solid;
border-right: 1px #000 solid;
border-collapse: collapse;
text-align: center;
margin: 0 auto;
}

Dit lijkt bij mij echter niet te werken

Had ik het toch goed geprobeerd ;)
Dank voor de poging maar werkt inderdaad ook bij mij niet...

probeer het eens door die width container te veranderen naar 887px

en dan die margin: 0 auto;