✔ nowrap für div in div

[mogmog]

Hallo zusammen,

Habe mal eine frage es geht darum ich möchte mehre div´s in einem parent div neben einander haben. Ich habe folgendes Gemacht nur geht das leider nicht:

<div id="warper">
  <div class="nowrap">
     hier von beliebig viele
  </div>
  <div class="nowrap">
     hier von beliebig viele
  </div>
  <div class="nowrap">
     hier von beliebig viele
  </div>
  <div class="nowrap">
     hier von beliebig viele
  </div>
</div>

Per css habe ich nun folgendes gemacht

div#warper {
    position: relative;
    height:400px;
    width:100%;
}

div.nowrap{
    position: relative;
    float: left;
    display: block;
    width:400px;
    height: 400px;
    white-space: nowrap;
}

es werden aber immer noch am ende des Browsers alles div umgebrochen. Was kann ich dagegen machen. für diesen Fall muss ich "div´s"nehmen es gibt leider nicht die Möglichkeit auf eine endlos breite Tabelle umzusteigen das alles einfacher machen würde auch wenn es etwas "dreckig" ist.

mit der JS Keule wollte ich nicht bei gehen, da es ja eine Lösung dafür geben muss.

mfg

mogmog

 

[SpiceLab]

Möglichkeit Nr.1: Die Anzahl der inneren Blöcke multipliziert mit ihrer Breite ergibt die Gesamtbreite für #warper.

div#warper {
    position: relative;
    height:400px;
    width:1600px;
}

div.nowrap{
    position: relative;
    float: left;
    width:400px;
    height: 400px;
    /*white-space: nowrap;*/ /* ergibt hier keinen Sinn */
}

Möglichkeit Nr.2: Die Anzahl der inneren Blöcke multipliziert mit ihrer Breite ergibt die Mindestbreite für #warper.

div#warper {
    position: relative;
    height:400px;
    min-width:1600px;
}

div.nowrap{
    position: relative;
    float: left;
    width:400px;
    height: 400px;
    /*white-space: nowrap;*/ /* ergibt hier keinen Sinn */
}

Möglichkeit Nr.3: white-space:nowrap auf das Elternelement #warper anwenden, wo diese Eigenschaft ihre Wirkung zeigt. Anstelle von float:left kommt dann für die inneren Blöcke display:inline bzw. display:inline-block wegen ihrer Breiten-/Höhendefinitionen zum Einsatz.

div#warper {
    position: relative;
    height:400px;
    width:100%;
    white-space:nowrap;
}

div.nowrap{
    position: relative;
    display: inline-block;
    width:400px;
    height: 400px;
}

P.S. "warper" sollte eigentlich "wrapper" heißen - der Begriff leitet sich von "to wrap" ab, was übersetzt "einwickeln", "einschlagen", "ein-/verpacken" bedeutet ;-)

 

[mogmog]

Danke für die Antwort das hatte das hatte so auch ganz gut geklappt =)