Wie mit CSS zwei divs nebeneinander positionieren=

[Detlef G.]

Hallo wbdesigner

Ich will bei einer WebSite oben eine header row haben, und in dieser dann links das Logo und recht eine Sprachwahl haben.
Wie mach ich das?
<div class="headerRow">
  <div class="logo">
    <img src="/images/uml2php.png" alt="uml2php" />

Wozu packst du das Bild in ein extra Div-Element?

</div>
  <div class="languageSelector">
    language selector here

Braucht dieser ein extra Div-Element?

</div>
</div>

/* header */
.headerRow { background-color:#e8e8e8; text-align:left }

Also den Text (und Inlineelemente links ausrichten. (dein Logo steckt aber in einem Blockelement, OK, es wird ja sowieso links begonnen)

.logo { text-align: left; width:245px; }

Wozu dient hier das text-align: left;?

.languageSelector { text-align: right; margin-right:10px }

OK, den Inlineinhalt rechts ausrichten.
Ich finde hier allerdings nichts, was dafür sorgen könnte, dass die Blockelemente neben statt untereinander angeordnet werden.

Nur wird bei mir der language Selector immer unter dem Logo angezeigt, ich hab schon wirklich alles versucht um die beiden nebeneinander zu bekommen.

Eine einfache Version ohne unnötige Div-Elemente könnte folgendermaßen aussehen.

CSS:

/* header */  
#headerRow { /* ID statt Klasse, Header gibt es üblicherweise nur einen */  
  background-color:#e8e8e8;  
  text-align: right;  /* Ausrichtung der Sparachauswahl */  
  padding-right:10px; /* Abstand der Sprachauswahl vom rechten Rand */  
  overflow:auto;      /* damit sich der Container der Höhe des gefloatete Logos anpasst */  
}  
* html #headerRow { /* nur für IE, damit es auch dort funktioniert */  
 overflow: visible;  
 height: 1%;  
}  
#headerRow img { /* wenn es nur ein Bild im Header gibt, ist keine extra Klasse oder ID nötig */  
  float: left;   /* wird links gefloatet, dadurch kann der weitere Inhalt daneben floaten */  
  width:245px;  
}  

XHTML:

<div id="headerRow">  
  <img src="/images/uml2php.png" alt="uml2php" />  
  language selector here  
</div>  

Auf Wiederlesen
Detlef