2 DIV nebeneinander geht nicht

[Alice]

Hallo.

Ich versuche aus SEO-Technischen Gründen mein Tabellen-Layout durch DIV-Container zu ersetzen aber es will mir einfach nicht so richtig gelingen.

Ich habe 4 Hauptbereiche auf meiner Webseite.
- Header
- Sidebar (link)
- Content-Bereich
- Footer

Header und Footer sind bereits komlett mit DIV-Containern ersetzt.

Aber Sidebar und Content bereiten mir große Probleme.

Kann es sein das die Tabellen die sich noch innerhalb des Conten-Bereichs liegen probleme machen? Denn die wollte ich erst viel später ersetzen.

<div id="wrapper">
     <div id="leftCol">
          ...
     </div>
     <div id="rightCol">
          ...
     </div>
</div>

#wrapper {
width: 100%;
margin: 0 auto;
}
 
#leftCol {
float: left;
width: 200px;
}

#rightCol {
float: right;
width: 100%;
}

Kann mir jemand helfen? Der Content-Bereich (<div id="rightCol">) rutscht immer nach unten unter die Sidebar (<div id="leftCol">)

 

[threadi]

Die #rightCol hat 100% Breite. Dann kann nichts daneben floaten

 

[Alice]

Und wie kann ich das Problem lösen? Denn die Sidebar muss 200px Breit sein und der Rest soll sie komplett auf dem Bildschirm verteilen.

 

[threadi]

Indem Du das Element #rightCol weglässt und die darinstehenden Inhalte dadurch die Sidebar automatisch um fließen.

 

[Alice]

Funktioniert leider nicht.

Kannst du mir bitte einen Code-Beispiel zeigen? Denn mit dem o.g. Code geht es nicht.

 

[threadi]

<div id="wrapper">
     <div id="leftCol">
          ...
     </div>
     <p>Irgendein Text der links daneben steht.</p>
</div>

Sollte klappen. Wenn nicht, zeig bitte deinen kompletten aktuellen Code. Am besten per Link zur Seite.

 

[H4ckHunt3r]

Falls du das 2. div umbedingt behalten willst(aus style gründen oder so),
musst du die restbreite mit javascript berechnen und setzen.^^
amsonsten geht des auch so wie threadi es geschrieben hat (sollte zumindest^^).