Zwei DIVs nebeneinander positionieren

[BenediktWi]

Ich erstelle gerade meine erste Webseite mit HTML und CSS und habe eine Frage dazu:

Ich habe zwei DIV-Container, die "main" und "sidebar" heißen.

Hier der CSS-Code:

#main { width: 666px; float: right; margin: 0px; }  

#sidebar { float: left; width: 510px; border-right: 1px solid #000; margin: 0px; }

Ich dachte, dass man mit "float" die Container nebeneinander positionieren kann, das funktioniert aber nicht so ganz.

Wie mache ich das dann?

Webseite kann ich nicht angeben, da ich gerade noch daran arbeite und der Webspace noch nicht freigeschaltet wurde.

Gruß,

Benedikt :)

[Gunther]

Hallo Benedikt!

Ich habe zwei DIV-Container, die "main" und "sidebar" heißen.

Hier der CSS-Code:

#main { width: 666px; float: right; margin: 0px; }

>   
> `#sidebar { float: left; width: 510px; border-right: 1px solid #000; margin: 0px; }`{:.language-css}  
  
Und wo ist der (relevante) HTML Code?  
Das ohne das jeweils andere ist i.d.R. nicht hilfreich.  
  

> Ich dachte, dass man mit "float" die Container nebeneinander positionieren kann,  
  
Kann man auch ...! ;-)  
  

> das funktioniert aber nicht so ganz.  
  
Das ist keine "Fehlerbeschreibung" mit der irgendjemand etwas anfangen könnte.  
  

> Wie mache ich das dann?  
  
Dazu gibt es nicht nur hier im Forum (die Suche gibt Auskunft) bereits zahlreiche Threads, sondern auch unzählige Tutorials im Netz. Da das Layout ja quasi die Basis jeder Website ist.  
  
Ob es heutzutage noch unbedingt "empfehlenswert" ist, sein Layout auf Basis von 'Float' zu gestalten, ist eine andere Frage. Und wenn auch nur rein zu "Lern- & Übungszwecken" kann es zumindest nicht schaden. ;-)  
  

> Webseite kann ich nicht angeben, da ich gerade noch daran arbeite und der Webspace noch nicht freigeschaltet wurde.  
  
Dafür gibt es ebenfalls hunderte andere Möglichkeiten - eine ist z.B. <http://jsfiddle.net/>  
  
  
Gruß Gunther

[Der Martin]

Hallo,

#main { width: 666px; float: right; margin: 0px; }

#sidebar { float: left; width: 510px; border-right: 1px solid #000; margin: 0px; }

  
das ergibt schon mal mindestens 1177px Platzbedarf in der Breite. Wenn die verfügbare Breite im Browser kleiner ist, werden die beiden Boxen untereinander rutschen. Und das dürften im mobilen Bereich sehr viele sein; selbst auf Desktop-Systemen halte ich ein fast 1200px breites Browserfenster für eine Seltenheit.  
  

> Ich dachte, dass man mit "float" die Container nebeneinander positionieren kann, das funktioniert aber nicht so ganz.  
  
"Funktioniert nicht" funktioniert leider nicht. Du erwartest, dass beide Boxen nebeneinander stehen, soviel habe ich verstanden, und der CSS-Code könnte das auch hergeben. Wie äußert sich also das "funktioniert nicht"?  
  
Nebenbei muss ich Gunther absolut zustimmen: HTML und CSS greifen ineinander. Eins ohne das andere ist unvollständig und reicht nicht für eine Fehlerdiagnose. Zeige uns daher den relevanten Teil von beidem.  
  
Ciao,  
 Martin  

-- 
Du kannst dem Leben nicht mehr Tage geben.  
Aber dem Tag mehr Leben.  
Selfcode: fo:) ch:{ rl:| br:< n4:( ie:| mo:| va:) de:] zu:) fl:{ ss:) ls:µ js:(

[Gunnar Bittersmann]

@@BenediktWi:

nuqneH

Ich habe zwei DIV-Container, die "main" und "sidebar" heißen.

Namen sind Schall und Rauch. Die Container sollten nicht nur so heißen, sondern solche Elemente SEIN.

Also das main-Element zur Auszeichnung des Hauptinhalts verwenden und ein je nach Inhalt passendes für die Seitenspalte (aside, footer, nav, …).

Qapla'