Seite 1 von 1

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

Verfasst: 20.08.2005 18:03
von 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

Verfasst: 20.08.2005 18:31
von 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>

Verfasst: 20.08.2005 18:40
von shwepsi
Clone hat geschrieben:

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

Verfasst: 20.08.2005 19:56
von S2B
shwepsi hat geschrieben: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. :roll:

Verfasst: 20.08.2005 19:59
von 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;
}

Verfasst: 20.08.2005 20:01
von S2B
Stimmt, nur logisch, danke. :)