Zeilenumbruch bei float verhindern?

[snorri]

Hi alle,

gibt es eine Möglichkeit, bei mehreren floatenden Elementen nebeneinander einen Zeilenumbruch zu verhindern?

Ich möchte im folgenden Fall einen horizontalen statt eines vertikalen Scrollbar haben:

<style>
div.aussen {
 width: 300px; height: 120px; white-space: nowrap; overflow: auto; border: 1px solid red;
}
div.innen {
 float: left; display: inline; width: 80px; height: 80px; margin: 10px; border: 1px solid blue;
}
</style>

<div class="aussen">
 <div class="innen"></div>
 <div class="innen"></div>
 <div class="innen"></div>
 <div class="innen"></div>
</div>

Jemand 'ne Idee?

-- snorri

[steckl]

Hi,

Ich möchte im folgenden Fall einen horizontalen statt eines vertikalen Scrollbar haben.

Hier ein (sicher verbesserungswürdiger) Workaround:

<style>

div.ganzaussen {
 width: 300px;
 height: 140px;
 overflow: auto;
 border: 1px solid red;
}

div.aussen {
 width: 550px;
 height: 120px;
 overflow: visible;
 border: 1px solid red;
}
div.innen {
 float: left;
 width: 80px;
 height: 80px;
 margin: 20px;
 border: 1px solid blue;
}
</style>

<div class="ganzaussen">
 <div class="aussen">
  <div class="innen"></div>
  <div class="innen"></div>
  <div class="innen"></div>
  <div class="innen"></div>
 </div>
</div>

Vielleicht wäre das ganze auch ohne das zusätzliche Div möglich, aber ich hab jetzt leider keine Zeit mehr weiter rumzuprobieren.

mfG,
steckl

[snorri]

Hmja, das hätte ich dazusagen sollen: Die Anzahl der floatenden Innen-divs -- und damit die Gesamtbreite des Inhalts des Außen-divs -- ist unbekannt.

Aber danke für den Versuch!

-- snorri

[Gernot Back]

Hallo snorri,

Hmja, das hätte ich dazusagen sollen: Die Anzahl der floatenden Innen-divs -- und damit die Gesamtbreite des Inhalts des Außen-divs -- ist unbekannt.

Ich hatte da vor Kurzem mal was mit JavaScript vorbereitet:

http://forum.de.selfhtml.org/archiv/2007/6/t154388/#m1004971

Gruß Gernot

[DeWitt]

div.innen {
float: left; display: inline; width: 80px; height: 80px; margin: 10px; border: 1px solid blue;
}

Schon mal ohne die float-Angabe versucht? Allerdings wird  dann wohl die Höhen- und Breitenangabe ignoriert werden.

Ciao,
David //aka DeWitt