[ERLEDIGT] Zwei Divs nebeneinander

[Palamedis]

Moin Leute,

Ich bin recht neu was die Praxis der Webseitenerstellung angeht, da ich mir erst Theorie durch Bücher
angeeignet hab.

Mein Problem ist folgendes:
Ich habe ein #videos -div und ein #news -div, dieso sollen innerhalb des #midcontent -divs nebeneinander
angeordnet werden.

Dazu ein wenig code:

<div id="midcontent">

  <div id="videos">
  </div>

  <div id="news">
  </div>

</div>

und Stilregeln:

#midcontent {
    width:              680px;
    background-color:   yellow;
    margin-right:       auto;
    margin-left:        auto;
    height:             430px;
    clear:              both;
}
#videos {
    float:              left;
    width:              320px;
    margin-right:       50px;
    height:             430px;
}
#news {
    float:              right;
    width:              310px;
    margin-left:        50px;
    height:             430px;
}

Schematische Darstellung:


Ich hoffe, dass mir jemand bei diesem banalen Problem helfen kann.

Mit freundlichen Grüßen

 

[threadi]

Deine eigentliche Frage geht nicht wirklich aus deinem Beitrag hervor. Ich vermute mal Du hast ein Problem mit der Anordnung der Elemente links und rechts. Das rechte wird vermutlich (!) vor dem linken dargestellt?! Um das zu lösen verschieb mal das #news-Element vor das andere Element.

Wenn es etwas anderes ist, solltest Du deine Frage genauer formulieren.

 

[djheke]

Du musst die margins natürlich mit berücksichtigen.

320 + 50 + 310 + 50 = 730px

Also #midcontent { width:730px; }

 

[Palamedis]

Das eigentliche Problem ist, dass #news immer unter #videos im übergeordneten div #midcontent dargestellt wird. Ich bekomm' das einfach nicht hin, dass die beiden nebeneinander stehen. Apropos margins: nur zwischen #videos und #news soll 50px platz sein, sonst gibt es keine abstände innerhalb von #midcontent

 

[Tronjer]

djheke hat es dir doch vorgerechnet, und außerdem macht es hier wenig Sinn, float: left mit float: right zu kombinieren.

 

[Palamedis]

Es gibt nur EINEN 50px abstand zwischen den beiden divs in #midcontent.
Wie man das sonst hinkriegen könnte, weiß ich leider nicht :/

 

[Tronjer]

Setz dein div #midcontent auf 730px und die darin liegenden Elemente auf float: left.

 

[Palamedis]

Okay ich bin noch mal die Antworten durchgegangen, danke für die schnelle Hilfe! Hat jetzt alles funktioniert ;)