✔ Divs sollen im Container nicht umbrechen...

[BlackCoffee]

Hallo Community,

ich habe einen Container der keine feste Breite hat. Dieser soll unendlich viele gefloatete Divs mit fester Breite ein einer Reihe aufnehmen (siehe soll-zustand.png).

Leider werden momentan die Divs am Ende des Bildschirms / Viewports in die nächste Zeile gebrochen (siehe ist-zustand.png).

<style type="text/css">
	#gruen {background-color:#c9f0cf; height:700px;}
	.orange {background-color:#ffb400; width:500px; margin:5px; float:left;}
</style>

<div id="gruen">
    <div class="orange">Orange 1</div>
    <div class="orange">Orange 2</div>
    <div class="orange">Orange 3</div>
    <div class="orange">Orange 4</div
</div>

Hat jemand eine Idee? Ich wäre sehr dankbar!

 

[hela]

Hallo,

normalerweise darf man in einem HTML-Dokument ein ID-Attributnamen nur einmal vergeben. Das ID-Attribut "orange" taucht bei dir viermal auf - daraus müsstest du ein Klassenattribut machen.

Der DIV-Block grün hat keine Breitenangabe. Dafür sind die Blöcke, die dort rein sollen, jeweils 500px breit. Eine Auspolsterung von links und rechts jeweils 5px mitgerechnet, passen die vier "orange"-Blöcke dort also rein, wenn es ein Vorfahrenelement mit einer Breite von 2040px und größer gibt.

Ansonsten könntest du die overflow-Eigenschaft verwenden.

 

[BlackCoffee]

Das mit der Klasse habe ich schonmal korrigiert. Vielen Dank dafür!

Ich möchte meinem grünen Container keine feste Breite geben. Der Container soll unendlich viele orangene Divs aufnehmen können quasi in der Breite mitwachsen.

Ich habe overflow:visible angewendet, leider ohne Erfolg. Overflow funktioniert glaub ich nur wenn man eine feste Größe hat, die ich aber nicht haben möchte, zumindest nicht in der Breite des grünen Containers.

 

[Anna Bolika]

Also ganz ohne irgendeine Definition eines irgendwie unendlich breiten Bildschirms wird es in meinen Augen nicht gehen. Wie wäre es damit. Klappt mit Firefox4b8 und IE8. Du kannst den body ja noch breiter machen, wenns sein muss.

<style type="text/css">
	body { width: 2000px;}
    #gruen {background-color:#c9f0cf; height:700px;}
    .orange {background-color:#ffb400; height: 200px; width:200px; margin:5px; float:left; display: block;}
</style>
</head>

<div id="gruen">
    <div class="orange">Orange 1</div>
    <div class="orange">Orange 2</div>
    <div class="orange">Orange 3</div>
    <div class="orange">Orange 4</div>

    <div class="orange">Orange 1</div>
    <div class="orange">Orange 2</div>
    <div class="orange">Orange 3</div>
    <div class="orange">Orange 4</div>

    <div class="orange">Orange 1</div>
    <div class="orange">Orange 2</div>
    <div class="orange">Orange 3</div>
    <div class="orange">Orange 4</div>

    <div class="orange">Orange 1</div>
    <div class="orange">Orange 2</div>
    <div class="orange">Orange 3</div>
    <div class="orange">Orange 4</div>


</div>

 

[hela]

Also ganz ohne irgendeine Definition eines irgendwie unendlich breiten Bildschirms wird es in meinen Augen nicht gehen.

Hallo,

sicherlich meinst du "ohne irgendeine Definition eines endlich breiten" Vorfahrenelements.
Genau so ist es und so geht es auch:

<div id="wrapper">
  <div id="gruen">
    <div class="orange">Orange 1</div>
    <div class="orange">Orange 2</div>
    <div class="orange">Orange 3</div>
    <div class="orange">Orange 4</div>
  </div>
</wrapper>

#wrapper {
  width: 40em;
  overflow: hidden;
}
#gruen {
  width: 2050px;
  height: 700px;
  background-color: #c9f0cf;
}
.orange {
  float: left;
  width: 500px;
  margin: 5px;
  background-color: #ffb400;
}

Kleiner Nachtrag:
Vielleicht ist dieser Thread auch interessant, insbesondere der Beitrag #6 von Maik.

 

[BlackCoffee]

Also ganz ohne irgendeine Definition eines irgendwie unendlich breiten Bildschirms wird es in meinen Augen nicht gehen.

Die Lösung ohne eine width-Angabe lautet wie folgt:

#gruen {background-color:#c9f0cf; height:700px; white-space:nowrap;}
.orange {background-color:#ffb400; width:500px; margin:5px; display:inline-block;}

Ganze ohne float. Aber ob das insgesamt eine gute Lösung ist, wird sich noch zeigen.