Antworten auf deine Fragen:
Neues Thema erstellen

Antworten zum Thema „Mehrere Boxen in einer Box horizontal floaten lassen“

dragingthelake

Noch nicht viel geschrieben

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:
HTML:
* {
	margin: 0;
	padding: 0;
}

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

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

HTML:
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

Fühlt sich wohl hier!

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:
HTML:
* {
    margin: 0;
    padding: 0;
}

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

.box {
    width: 280px;
    height: 280px;
    border: solid 1px #F00;
    float: left;
}
HTML:
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

Noch nicht viel geschrieben

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
 

dragingthelake

Noch nicht viel geschrieben

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

Aktives Mitglied

AW: Mehrere Boxen in einer Box horizontal floaten lassen

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

fexx

Aktives Mitglied

AW: Mehrere Boxen in einer Box horizontal floaten lassen

eine einfache html seite, die das problem darstellt :)
 

dragingthelake

Noch nicht viel geschrieben

AW: Mehrere Boxen in einer Box horizontal floaten lassen

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

sokie

Mod | Web

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

Noch nicht viel geschrieben

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 :mad:

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

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

sokie

Mod | Web

AW: Mehrere Boxen in einer Box horizontal floaten lassen

HTML:
<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>
Code:
* {
    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.
 
Zuletzt bearbeitet:

dragingthelake

Noch nicht viel geschrieben

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
 
Bilder bitte hier hochladen und danach über das Bild-Icon (Direktlink vorher kopieren) platzieren.
Antworten auf deine Fragen:
Neues Thema erstellen

Willkommen auf PSD-Tutorials.de

In unseren Foren vernetzt du dich mit anderen Personen, um dich rund um die Themen Fotografie, Grafik, Gestaltung, Bildbearbeitung und 3D auszutauschen. Außerdem schalten wir für dich regelmäßig kostenlose Inhalte frei. Liebe Grüße senden dir die PSD-Gründer Stefan und Matthias Petri aus Waren an der Müritz. Hier erfährst du mehr über uns.

Stefan und Matthias Petri von PSD-Tutorials.de

Nächster neuer Gratisinhalt

03
Stunden
:
:
25
Minuten
:
:
19
Sekunden

Flatrate für Tutorials, Assets, Vorlagen

Statistik des Forums

Themen
175.158
Beiträge
2.581.872
Mitglieder
67.225
Neuestes Mitglied
Petra
Oben