✔ Abstände zwischen floatenden DIVs

[worki2k1]

Hallo Leute,

heute habe ich auch mal eine CSS-Frage. Ich habe innerhalb eines DIVs mit fester Breite 1-4 DIVs, die ich per float:left; dazu bringe nebeneinander zu erscheinen. Jetzt soll zwischen den DIVs ein Abstand von 10px sein, aber nicht in den Abständen nach außen.

Folgender Quelltext:

// CSS
#aussen {
  width: 650px;
}

#aussen .box {
  float: left;
}

#aussen .box + .box {
  margin-left: 10px;
}

#aussen .colspan1 {
  width: 155px;
}



// HTML
<div id="aussen">
  <div class="box colspan1">
    Inhalt der Box 1.
  </div>
  <div class="box colspan1">
    Inhalt der Box 2.
  </div>
  <div class="box colspan1">
    Inhalt der Box 3.
  </div>
  <div class="box colspan1">
    Inhalt der Box 4.
  </div>
</div>

Der Verknüpfung der Klasse box + box führt in den meisten Browsern dazu, dass das Element mit der Klasse "box", dass direkt auf ein anderes Element mit der Klasse "Box" folgt, davon einen linken Abstand von 10px bekommt. Nur im IE wird das nicht interpretiert.

Ich habe auch schon überlegt eine Browserweiche zu machen und entweder dem ersten oder letzten DIV eine andere Klasse zu geben, in der ich einen Abstand weglasse, aber das ist auch nicht die beste Lösung.

Die Pseudo-Klasse :first-child habe ich mir auch schon angesehen. Diese wird leider auch von IE nicht interpretiert.

Hat jemand das Problem schon einmal gehabt und kennt dort ggf. ein IE-Hack um das Problem auszugleichen?

 

[Maik]

Hi,

ich würde das so umsetzen:

#aussen {
  width: 650px;
}

#aussen .box {
  float: left;
}

#aussen .colspan1 {
  width: 155px;
}

#aussen .marginRight {
  margin-right: 10px;
}

<div id="aussen">
  <div class="box colspan1 marginRight">
    Inhalt der Box 1.
  </div>
  <div class="box colspan1 marginRight">
    Inhalt der Box 2.
  </div>
  <div class="box colspan1 marginRight">
    Inhalt der Box 3.
  </div>
  <div class="box colspan1">
    Inhalt der Box 4.
  </div>
</div>

Dann ist auch kein CSS-Hack oder eine Browserweiche für den IE erforderlich.

 

[hela]

Hallo,

ich habe auch eine Variante: In den "aussen"-DIV-Block noch einen transparenten "innen"-DIV-Block einsetzen, der mit einem negativen Margin rechts um 10px verbreitert wird.
Kurz und schmerzlos:

<div id="aussen">
    <div class="innen">
      <div>Inhalt der Box 1.</div>
      <div>Inhalt der Box 2.</div>
      <div>Inhalt der Box 3.</div>
      <div>Inhalt der Box 4.</div>
    </div>
</div>

CSS:

#aussen {
  width: 650px;
}
#aussen .innen {
    margin-right: -10px;
}
#aussen .innen div {
    float: left;
    width: 155px;
    margin-right: 10px;
}

 

[worki2k1]

@Maik: An diese Lösung hatte ich auch schon gedacht, aber ich wollte eben nicht unterschiedliche Klassen zuweisen, da das ganze einfach ohne Aufwand verschiebbar sein soll.

@hela: Die Lösung scheint mir die sauberste zu sein. Werde ich morgen gleich mal ausprobieren. Ich das wird schon funktionieren. Danke. Manchmal sieht man eben den Wald vor lauter Bäumen nicht mehr.