✔ Übrigen horizontalen Platz nutzen

[bled]

Hallo Leute,

ich hab momentan folgendes Problem:
Ich hab ein div-Element als Container, der weitere 4 div-Elemente enthält. Alle 4 Elemente sind auf float: left; gesetzt.
Ich möchte nun, dass der insgesamt zur Verfügung stehende horizontale Platz von allen 4 Elementen zusammen benutzt wird. Dabei sollen das linke und die zwei rechten Elemente eine feste Breite haben. Das zweite Element von link soll aber den übrigen Platz einnehmen. Das größte Problem bei der Sache: Das Layout soll sich natürlich an die Browsergröße anpassen.

Momentan sieht das so aus:

Breite der Seite (bzw des Containers, flexibel)
--------------------------------------------------------------------------------------------
| element 1 | element 2 | element 3 | element 4 |

Wenn ich dem 2. Element jetzt aber eine Breite in Prozent gebe, dann funktioniert das natürlich nicht richtig mit dem Ändern der Browsergröße. Irgendwann wird dann das 4. Element in der Zeile umgebrochen und irgendwann auch das 3.. Genau das möchte ich aber vermeiden. Der Container hat eine min-width, dh. irgendwann wird er nicht mehr kleiner und der Browser blendet Scrollbalken ein. Ich möchte nun, dass sich das 2. Element auch der Größe anpasst und zwar so, dass die anderen Element in derselben Zeile bleiben.
Ich hoffe, ich hab mich einigermaßen verständlich ausgedrückt. Danke schonmal!

 

[Maik]

Hi,

versuch es mal hiermit:

#element1 {
float:left;
width:200px;
background:#bbb;
}

#element2 {
margin:0 400px 0 200px;
background:#ffff00;
}

#element3 {
float:right;
width:200px;
background:#ddd;
}

#element4 {
float:right;
width:200px;
background:#bbb;
}

<div id="element1">element1</div>
<div id="element4">element4</div>
<div id="element3">element3</div>
<div id="element2">element2</div>

 

[bled]

Also wenn ich das float beim zweiten Element weglassen, dann werden Element 3 und 4 erst mal umgebrochen, was ja logisch ist.
Wenn ich Element 2 auf float: left; setze, dann sieht das Ganze etwa folgendermaßen aus:

-----------------------------------------------------------------------------------------
|element1|           |element2|            |element3||element4|

Eigentlich sollte es so sein:

-----------------------------------------------------------------------------------------
|element1||           element2            ||element3||element4|

 

[Maik]

Hab ich was mißverstanden, oder hast du meinen Vorschlag noch nicht überprüft?

 

[bled]

Hab ich was mißverstanden, oder hast du meinen Vorschlag noch nicht überprüft?

Mein zweiter Post war eigentlich die Antwort auf deinen Vorschlag. Ansonsten hätte ich meinen ersten Beitrag editiert

 

[Maik]

Aha, und dieses Konstrukt entspricht dann nicht deinen Vorstellungen? :suspekt:



Das gelb hinterlegte Element #2 besitzt eine dynamische Breite, und füllt den übrigen horizontalen Platz aus, den der horizontale Viewport zur Verfügung stellt.

 

[bled]

Hätte nichts dagegen, wenn es funktionieren würde.
Bei mir sieht dein Vorschlag allerdings so aus:

 

[Maik]

Dann zeig doch bitte mal deinen vollständigen HTML- und CSS-Code, denn wenn ich drei Posts vorher lese, was du da an meinem CSS-Code alles umgestellt hast, wundert es mich nicht, dass sowas bei heraus kommt.

 

[bled]

Im Prinzip versuche ich das Garland-Theme von Drupal 5 auf meine Bedürfnisse anzupassen.

Dabei sieht ein Beitrag auf der rechten Seite so aus:

<div id="node-16" class="node">
<div class="content">
<div class="image-attach-teaser">
<a href="/drupal/en/node/16"><img src="http://localhost/drupal/files/images/BASILICA_by_ANTIFAN_REAL.teaser.jpg" alt="basilica" title="basilica"  class="image image-teaser" /></a>
</div>
<div class="product-teaser">
<a href="./en/node/16" class="heading">neues produkt</a>
<br/>
</div>
<div class="price">€0,00</div>
<div class="add-cart">
<a href="./cart/add/16">Add to cart</a>
</div>
</div>
</div>

Wenn ich dafür jetzt folgenden CSS Coden verwende:

.image-attach-teaser, .product-teaser, .price, .add-cart {
  margin-right: 0.1em;
  height: 50px;
  padding: 10px;
  border: 1px solid blue;
  background-color: #0AF;
}

.image-attach-teaser {
  width: 100px;
  float: left;
}

.product-teaser {
  line-height: 2em;
  margin:0 200px 0 200px;
  float: left;
}

.price {
  color: black;
  width: 40px;
}

.add-cart {
  width: 100px;
}

.price, .add-cart {
  line-height: 4em;
  float: right;
}

Dann sieht es folgendermaßen aus:

 

[Maik]

Nimm mal im Selektor .product-teaser die float-Deklaration heraus:

.product-teaser {
  line-height: 2em;
  margin:0 200px 0 200px;
  /*float: left;*/
}

und notiere die DIVs in dieser Reihenfolge:

<div id="node-16" class="node">
     <div class="content">
          <div class="image-attach-teaser">
               <a href="/drupal/en/node/16"><img src="http://localhost/drupal/files/images/BASILICA_by_ANTIFAN_REAL.teaser.jpg" alt="basilica" title="basilica"  class="image image-teaser" /></a>
          </div>
          <div class="add-cart">
               <a href="./cart/add/16">Add to cart</a>
          </div>
          <div class="price">
               €0,00
          </div>
          <div class="product-teaser">
               <a href="./en/node/16" class="heading">neues produkt</a>
               <br/>
          </div>
     </div>
</div>

Nichts anderes hatte ich dir aber vorgeschlagen.