CSS, 2 Boxen, gesamtbreite 100 %, das linke feste größe, wie

[shwepsi]

Hallo,

ich versuche gerade verzweifelt mit CSS 2 Boxen nebeneinander zu bekommen. float: left habe ich schon verwendet, hilft aber nicht weiter weil

die linke Box hat eine feste größe, die rechte Box soll auf 100% auffüllen
leider ist der Inhalt der rechten Box nur ein paar Zeichen groß

Muss ich nun zu einer Tabelle greifen oder bekommt man das auch anders hin?

MfG
Schwepsi

[Clone]

Code: Alles auswählen

<div style="width:100%;">
<div style="width:150px;float:left;">Box 1</div>
<div style="width:100%;">Box 2</div>
</div>

[shwepsi]

Code: Alles auswählen

<div style="width:100%;">
<div style="width:150px;float:left;">Box 1</div>
<div style="width:100%;">Box 2</div>
</div>

fast, im IE schmeisst er die 2. Box dann unter die erste
also so:

Code: Alles auswählen

|---Box gesamt------------|
| |--- Box 1 --|          |
| |____________|          |
| |--------- Box 2 -----| |
| |_____________________| |
|_________________________|

die Lösung ist ein wenig mit span zu tricksen

Code: Alles auswählen

<div style="width:100%;">
   <div style="width:150px;float:left;">Box 1</div>
   <span style="width:100%;">Box 2</span>
</div>

ist sicher nicht die eleganteste Lösung, aber es klappt solange die rechte Box flacher als die linke ist
trotzdem danke

[S2B]

ist sicher nicht die eleganteste Lösung, aber es klappt solange die rechte Box flacher als die linke ist
trotzdem danke

Weiß jemand zufällig eine elegantere Lösung für das Problem? Ich hatte nämlich vor ein paar Tagen dieselben Schwierigkeiten, sowas hinzukriegen.

[Pyramide]

Ich habe letztens diese Variante verwendet, die auf das wesentliche reduziert so aussieht:

HTML:

Code: Alles auswählen

<div id="nav">Navigation</div>
<div id="main">Blah Blah Blah Blah</div>

CSS:

Code: Alles auswählen

#nav {
	float: left;
	width: 10em;
}

#main {
	margin-left: 11em;
}

[S2B]

Stimmt, nur logisch, danke.