Ausrichten zweier Divs nebeneinander

Question

Ich habe ein kleines Problem. Ich versuche, zwei Divs nebeneinander mit CSS auszurichten, jedoch möchte ich, dass das mittlere Div horizontal in der Mitte der Seite positioniert wird, ich erreichte dies durch die Verwendung:

#page-wrap { margin 0 auto; }

Das hat gut funktioniert. Das zweite div möchte ich auf der linken Seite der zentralen Seite wrap positioniert, aber ich kann nicht verwalten, dies mit Floats zu tun, obwohl ich sicher bin, dass es möglich ist.

Ich möchte das rote Div neben dem weißen Div nach oben schieben.

Hier ist mein aktuelles CSS für diese beiden Divs, wobei sidebar das rote Div und page-wrap das weiße Div ist:

#sidebar {
    width: 200px;
    height: 400px;
    background: red;
    float: left;
}

#page-wrap {
    margin: 0 auto;
    width: 600px;
    background: #ffffff;
    height: 400px;
}

Answer 1

Die einfachste Methode wäre, beide in eine container div und anwenden margin: 0 auto; zum Container. Dadurch werden sowohl die #page-wrap und die #sidebar Divs auf der Seite. Wenn Sie jedoch das exzentrische Aussehen wünschen, können Sie die container 200px nach links, um die Breite des Feldes zu berücksichtigen #sidebar div.