Mehrere Boxen in einer Box horizontal floaten lassen

[dragingthelake]

Hallo

Ich kriege es nicht hin mehrere Boxen in einer Box horizontal floaten zu lassen.
Ich muss immer nach unten scrollen, dabei sollte das ganze horizontal scrollen.

Hier der Code:

CSS:

* {
	margin: 0;
	padding: 0;
}

#boxcontainer {
	width: 300px;
	height: 300px;
	overflow: auto;
}

.box {
	width: 280px;
	height: 280px;
	border: solid 1px #F00;
	float: left;
}

HTML:

<div id="boxcontainer">
    <div class="box">
        	10
     </div>
     <div class="box">
        	20
     </div>
     <div class="box">
        	30
      </div>
      <div class="box">
        	40
       </div>
</div>

Wäre dankbar um eure hilfe!

Gruss damian

 

[Christoph_Ac]

AW: Mehrere Boxen in einer Box horizontal floaten lassen

Hallo

Ich kriege es nicht hin mehrere Boxen in einer Box horizontal floaten zu lassen.
Ich muss immer nach unten scrollen, dabei sollte das ganze horizontal scrollen.

Hier der Code:

CSS:

* {
    margin: 0;
    padding: 0;
}

#boxcontainer {
    width: 300px;
    height: 300px;
    overflow: auto;
}

.box {
    width: 280px;
    height: 280px;
    border: solid 1px #F00;
    float: left;
}

HTML:

<div id="boxcontainer">
    <div class="box">
            10
     </div>
     <div class="box">
            20
     </div>
     <div class="box">
            30
      </div>
      <div class="box">
            40
       </div>
</div>

Wäre dankbar um eure hilfe!

Gruss damian

Wenn ich das auf den ersten Blick richtig sehe, ist die umschließende "Box" mit einer festen Breite ausgestattet. Dadurch passen nur so viele Boxen in die Horizontale, bis die Breite erreicht wurde. Wenn du die feste Breite heraus nimmst sollte es klappen.

Denn der Container ist 300px breit, eine Box schon 280. Würde bdeuten, dass einfach klein Platz mehr ist.

Ich habe irgendwie immernoch das Gefühl etwas übersehen zu haben^^ versuch es trotzdem

lg Chris

 

[dragingthelake]

AW: Mehrere Boxen in einer Box horizontal floaten lassen

Hallo Chris

Danke für deine schnelle Antwort.

Das dort nur eine Box rein passt ist eben genau das was ich will.
Um die anderen Boxen dann anschauen zu können sollte man dann horizontal scrollen können...

gruss damian

 

[fexx]

AW: Mehrere Boxen in einer Box horizontal floaten lassen

CSS div element - how to show horizontal scroll bars only? - Stack Overflow

schau dir das mal an ich weis aber nicht, wies mit der browserkompatibilität aussieht

 

[dragingthelake]

AW: Mehrere Boxen in einer Box horizontal floaten lassen

hmm das ganze verläuft immer noch vertikal. Aber ich glaube die gehen dort auch nicht ganz vom gleichen Problem aus.... Die Rede ist dort immer nur von einem Inhalt aber ich habe mehreren....

 

[fexx]

AW: Mehrere Boxen in einer Box horizontal floaten lassen

lad mal bitte dein test case hoch, dass wir bisschen probieren können

 

[dragingthelake]

AW: Mehrere Boxen in einer Box horizontal floaten lassen

test case? verstehe ich jetzt nicht ganz...

 

[fexx]

AW: Mehrere Boxen in einer Box horizontal floaten lassen

eine einfache html seite, die das problem darstellt

 

[dragingthelake]

AW: Mehrere Boxen in einer Box horizontal floaten lassen

ah.
sry für die wartezeit... hier link: http://dragingthelake.kilu.de/

 

[dragingthelake]

AW: Mehrere Boxen in einer Box horizontal floaten lassen

und das ganze sollte jetzt eben auf die Seite scrollen und nicht nach unten...

 

[sokie]

AW: Mehrere Boxen in einer Box horizontal floaten lassen

wenn jede deiner boxen 282px breit ist, muss dein container eben mindestens 4x so breit sein. Wenn du diesen dann wiederum in einem Container horiz. scrollen hönnen willst musst du dein boxcontaintainer wiederum in einen schmaleren(mit overflow:auto) packen.

 

[tmbach15]

AW: Mehrere Boxen in einer Box horizontal floaten lassen

eine einfache html seite, die das problem darstellt

Mit den Codeschnipseln aus dem Threadstart kann man dies doch einfach lokal nachstellen.

Das Problem beim Lösungsansatz sehe ich in der Verwendung von

float in Kombination mit div-Elementen

Das Floating sorgt doch gerade dafür, dass die Elemente solange nebeneinander gelegt werden, wie im umgebenden Element Platz ist.

Kein Platz mehr -> also geht's untendrunter weiter

div-Elemente gehören zu den Block-Elementen, lassen auf der gleichen Zeilen also erst einmal keinen 'Nebenbuhler' zu

Versuch mal die <div class="box"> miteinander zu verschachteln und vergib margins - da sehe ich 'ne Möglichkeit Deinen Ansatz erfolgreich umzusetzen

 

[sokie]

AW: Mehrere Boxen in einer Box horizontal floaten lassen

<div id="outer">
  <div id="boxcontainer">
      <div class="box">
              10
       </div>
       <div class="box">
              20
       </div>
       <div class="box">
              30
        </div>
        <div class="box">
              40
         </div>
         <div class="clearfix"></div>
  </div>
</div>

* {
    margin: 0;
    padding: 0;
}
#outer{
    width:282px;
    overflow: auto;
    height: 300px;
}
#boxcontainer {
    width: 1182px;
}

.box {
    width: 280px;
    height: 280px;
    border: solid 1px #F00;
    float: left;
}
.clearfix{
    clear:both;
}

Versuch mal die <div class="box"> miteinander zu verschachteln und vergib margins - da sehe ich 'ne Möglichkeit Deinen Ansatz erfolgreich umzusetzen

mit solchen Tipps sorgst du dafür, dass Leute noch länger mit der Lösung ihres Problems beschäftigt sind.

 

[dragingthelake]

AW: Mehrere Boxen in einer Box horizontal floaten lassen

Hat geklappt!
Genau so wie ich es mir vorgestellt habe...

Vielen Dank euch allen!

gruss damian