nicht angemeldet
3-Spalten-Layout
0 0 0 0 0 
Kai345
3-Spalten-Layout
Hi,
ich habe ein 3-Spalten-Layout, basierend auf 3 DIV-Container, zusammengebastelt.
Dabei ist der linke Div auf "float:left", der rechte auf "float:right" und der mittlere dann wieder auf "float:left" gesetzt.
Die beiden äußeren Spalten haben eine feste Breite; die in der Mitte nicht. Auf diese Weise passt sich die Breite der mittleren Spalte beim Verändern des Browser-Fensters automatisch an.
Soweit funktioniert auch alles ganz gut. Alles ist an seiner Stelle wie es sein soll =)
Doch nun möchte ich innerhalb der mittleren Spalte den Content über die ganze Breite der Spalte strecken. Leider übersteigt eine Breite von 100% aber die Größe der mittleren Spalte; denn die 100% interpretiert er ja als Breite des gesamten Body-Bereichs, da kein fester Wert festgelegt wurde. Somit rutscht der ganz Block ganz nach unten, unterhalb der Spalten an den Seiten und füllt das komplette Browserfenster aus (in der Breite).
Kennt jemand dieses "Problem" und kann mir einen Tipp geben, wie ich den kompletten Bereich innerhalb der mittleren Spalte nutzen kann ohne feste Pixel-Angaben zu nutzen?
Gruss
emmi
-
Hallo,
vermutlich würde es funktioneren wenn du allen Div's Prozentangaben als Breite gibst und dem in der Mitte gar kein float.
Die Reihenfolge wäre dann div-links, div-rechts, div ohne float.
Grüße, Matze
-
Mit Prozentangaben kann ich mich leider nicht anfreunden, da ich eine feste Breite brauche um mein Design nicht zu zerstören ;)
Der left-float für die mittlere Spalte ist notwendig, da sonst der Inhalt der mittleren Spalte wirklich um die linke Spalte herumfließt und ggfl. dadrunter weiterläuft.
Mit dem Float-Left erreiche ich jedoch, dass der Inhalt der mittleren Spalte auch in seiner Spalte bleibt =)Gruss
emmi-
Seid gegrüßt!
Mit Prozentangaben kann ich mich leider nicht anfreunden, da ich eine feste Breite brauche um mein Design nicht zu zerstören ;)
Der left-float für die mittlere Spalte ist notwendig, da sonst der Inhalt der mittleren Spalte wirklich um die linke Spalte herumfließt und ggfl. dadrunter weiterläuft.
Mit dem Float-Left erreiche ich jedoch, dass der Inhalt der mittleren Spalte auch in seiner Spalte bleibt =)Dies kannst du auch mit entsprechend eingestellten margins/paddings erreichen.
--
Bis Später
RuD
________________________________________________________________
SelfCode: ie:% fl:( br:^ va:) ls:< fo:| rl:( n4:& ss:) de:> js:| ch:| mo:| zu:)-
Das würde ich zugern sehen :)
Das Problem ist ja folgendes:
Zunächst befindet sich der Inhalt der mittleren Spalte ja auch wirklich in der Mitte. Dort brauche ich also kein Padding/Margin. Alles ist bis hier hin perfekt =)
Wenn nun aber der Inhalt die Länge der danebenliegenden linken Spalte übersteigt, dann verläuft dieser unter der linken Spalte weiter. Das ist ja auch der Sinn von Float. Nur leider ist dies in meinem Beispiel ungewollt, sodass ich die mittlere Spalte ebenfalls auf Float:Left setze.Hierzu mal folgendes Beispiel ohne die Float-Angabe in der Mitte:
<html>
<body>
<div style="float: left; background-color: red; width: 200px;">links</div>
<div style="float: right; background-color: green; width: 200px;">rechts</div>
<div style="background-color: blue;">mitte<br>uebersteigt<br>laenge<br>der<br>linken<br>Spalte.</div>
</body>
</html>Die blaue Mitte rutscht hierbei zum Teil unter die linke rote Spalte. Sie soll aber eigentlich in der Mitte bleiben.
Dies ist möglich wenn man die mittlere Spalte auf Float:Left setzt. Könnt ihr ja mal ausprobieren :)
Der Nebeneffekt ist leider, dass die blaube mittlere Spalte nur so breit wie der Inhalt selbst ist. Ich hätte es aber gerne so, dass dieser die gesamte zur Verfügung stehende Breite ausnutzt.Ich hoffe, dass es so anschaulich besser verständlich ist :)
Gruss
emmi-
Grütze .. äh ... Grüße!
Was RuD dir wohl sagen wollte: benutze für die mittlere Spalte einem margin-left in der Breite der linken Spalte.
Cü
Kai--
Der vertuschte Gefahrstoff: Dihydrogenmonoxid
ie:{ fl:( br:< va:) ls:? fo:| rl:? n4:° ss:{ de:] js:| ch:? mo:| zu:|-
Ich wollts erst nicht glauben, hab mich aber nun doch dazu durchgerungen es einfach mal auszuprobieren ... und es funkt wirklich (margin-left und margin-right) xD
Ich danke euch vielmals!!!! =)
-
-
-
-
-