Frage stellenTach auch!
Ziel: Ich möchte mehrere DIVs gleicher Höhe in einer Zeile nebeneinander anordnen. Die gesamte Breite der Zeile soll genutzt werden.
Layout: [DIV 1, feste Breite], x*[DIV 2, feste Breite],[DIV 3, soll den Rest der Zeile auffüllen],[DIV 4, feste Breite]
Problem: Da DIV 2 dynamisch von PHP mehrmals geladen wird, wobei aber die Häufigkeit variabel sein soll, kann ich nicht einfach absolut positionieren und DIV 3 schlicht den Abstand von links vorgeben.
Idee: Irgendwann hatte ich mal eine Lösung gesehen, bei der DIV 1 & 2 links floaten, DIV 4 rechts floatet und DIV 3 dann mit clear: both beackert wird um automatisch die richtige Restbreite anzunehmen. Ich finde die Lösung aber nicht mehr und beim rumprobieren kam auch nichts raus.
Da ich noch keinen, mir ans Herz gewachsenen Code hierfür habe, spare ich es mir Codefragmente zu posten. Vielleicht hat ja jemand ein schönes Gerüst parat.
Community rund um Cascading Style Sheets, Tutorials & KnowHow für Webmaster
DIVs mit variabler Breite -> Float-Problem
4 Beiträge • Seite 1 von 1
DIVs mit variabler Breite -> Float-Problem
von Kongbert » 19.06.2008, 09:46
Wenn's net blutet, war's auch net so schlimm.
- Kongbert
- neu hier
- Beiträge: 3
- Registriert: 19.06.2008, 09:32
von Laus » 19.06.2008, 12:26
Hallo
Was spricht denn gegen eine simple und einfache Lösung.
Nur mal so als Denkanstoß.
Gruß Xaver
Was spricht denn gegen eine simple und einfache Lösung.
Nur mal so als Denkanstoß.
- Code: Alles auswählen
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Test</title>
<style type="text/css">
<!--
#w1 {min-height:500px;background:blue;}
#s1 {float:left;width:200px;height:500px;background:red;}
#s2 {float:left;width:200px;height:500px;background:yellow;}
#s3 {float:left;width:auto;height:500px;background:blue;}
#s4 {float:right;width:200px;height:500px;background:green;}
=-->
</style>
</head>
<body>
<div id="w1">
<div id="s1">1</div>
<div id="s2">2</div>
<div id="s3">3</div>
<div id="s4">4</div>
<br clear="both"/>
</div>
</body>
</html>
Gruß Xaver
Lachen ist kein schlechter Anfang und bei weitem das beste Ende.
(Oscar Wilde)
(Oscar Wilde)
-
Laus - Moderator
- Beiträge: 1229
- Registriert: 25.02.2006, 00:30
- Wohnort: Furth im Wald
von Kongbert » 19.06.2008, 13:19
Mein Fehler- hätte dazu sagen sollen, dass ich mit teilweise transparenten Boxen arbeite. D.h., die Boxen dürfen sich nicht überschneiden/überlagern, da sich die Transparenzen dann addieren.
Man könnte das Layout auch um ein DIV kürzen. Dann wäre das Layout:
[DIV1, feste Breite], x*[DIV 2, feste Breite], [DIV 3, Rest bis rechter Rand]
Man könnte das Layout auch um ein DIV kürzen. Dann wäre das Layout:
[DIV1, feste Breite], x*[DIV 2, feste Breite], [DIV 3, Rest bis rechter Rand]
Wenn's net blutet, war's auch net so schlimm.
- Kongbert
- neu hier
- Beiträge: 3
- Registriert: 19.06.2008, 09:32
4 Beiträge • Seite 1 von 1
Moderatoren: Laus, Moderatoren
Ähnliche Beiträge zu "DIVs mit variabler Breite -> Float-Problem"
- Positionierung von Divs, sprunghaftes verhalten
- Höhe von DIVs (tabellenartig) - alter Hut :-/
- 3 Divs nebeneinander mit wiederholendem Bild
- Zwischenbox mit variabler Zwischen-Höhe
- variable Anzahl von Divs zentrieren bei unbekannter Breite
- Positionierung und Breite der dritten Ebene, Horiz. Navi
- Maximale Container-Breite erzwingen
- IE6 benutzt nicht die angegebene Länge der <hr>
- CSS Tooltip <span> verdeckt Text aber keine Grafiken. Warum?
- Oben liegendes <div> soll "nicht aktiv" sein
Zurück zu: CSS für Fortgeschrittene
Wer ist online?
Mitglieder in diesem Forum: 0 Mitglieder und 5 Gäste