css-zweispaltiges-liquid-design mit div nicht table
0 0 0 0 0 0 
Jonathan
0
css-zweispaltiges-liquid-design mit div nicht table
Hallo,
wie lässt sich ein zweispaltiges Design mit CSS und divs am Besten realisieren? Auf irgendeienr Seite im WWW habe ich mal ein klasse, zweispaltiges Layout gesehen, bei dem wenn nicht genügend Platz zur Verfügung stand, die Bereiche einfach übereinander/untereinander angezeigt wurden. Wie stelle ich das an.
Mein bisheriges Ergebnis:
-----
div#links {
float:left;
width:12em;
}
div#normal {
margin-left:13em;
}
<div id="links">Hier steht Text mit<br>Umbrüchen</div>
<div id="normal">Und hier auch Text mit<br>Umbrüchen</div>
-----
Doch wie erreiche ich es, dass der normal-div bei zu gernigem Platz unter dem links-div angezeigt wird?
Und muss man wirklich den margin bei dem normal-div setzen, dass wirklich der komplette div neben dem links-div angezeigt wird?
Die Grundsatzdiskussion ob table für Laoyutzwecke oder nicht brauchen wir ja nicht durchzudiskutieren...
Danke für Hilfe
Gruß
P.S.: Wäre aus auch irgendwie möglich, den Text des linken divs irgendwie ganz nach unten zu positionieren? Mit vertical-align hatte ich keinen Erfolg.
-
min-width ist dein freund in diesem fall ;)
-
Hallo,
danke für deine Hilfe, aber wenn ich dem normalen div ein float:right mitgebe erscheint er unter dem links-div...
Oder habe ich da was falsch verstanden?
Gruß
-
Hallo,
Kann mir vielleicht jemand mit einem Beispiel helfen?
Ich habe mal irgendwo ne Seite gesehen, da waren 2 Divs nebeneinander angeornet und wenn der Platz in der Breite zu knapp wurde, sind diese Divs untereinandergerutscht.Gruß
-
P.S.: Floate ich den normalen Div auch nach Rechts, ist dieser automatisch immer 100% breit und wird daher unter dem links.-gefloateten Div angezeigt.
Nun möchte ich aber, dass dieser Div einfach den Platz recht neben dem links-gefloateten Div einnimmt...
Gruß
-
Bitte Hilfe!!1
-
Hallo,
Bitte Hilfe!!1
Ich verstehe jetzt nicht ganz, wo dein problem ist.
Vielleicht hilft folgender Artikel: http://aktuell.de.selfhtml.org/weblog/css-spaltenlayout
Jonathan
--
Selfcode: ie:( fl:{ br:> va:) ls:& fo:) rl:? ss:} de:> js:| ch:? mo:} zu:)-
Danke, ich hab den jetzt nochmal durchgearbeitet den Link...
Also mein Ergebnis ist jetzt ein 2-spaltiges Layout. Jedoch wird die min-width des rechten div nicht beachtet. Wie erreiche ich es, dass der div bei zu wenig Platz unter dem anderen dargestellt wird?
Und wie ist das mit den ganzen CSS-Hacks für den IE? Dadurch wird mein CSS invalide. Ich wollte aber alles valide machen...
Gruß
-
-
-
-
-
-
-
Yerf!
Doch wie erreiche ich es, dass der normal-div bei zu gernigem Platz unter dem links-div angezeigt wird?
Indem man auf margin-left verzichtet.
Und muss man wirklich den margin bei dem normal-div setzen, dass wirklich der komplette div neben dem links-div angezeigt wird?
Nein. Man kann auch einen eigenen Block-Formating-Context für diesen Div erzeugen.
P.S.: Wäre aus auch irgendwie möglich, den Text des linken divs irgendwie ganz nach unten zu positionieren? Mit vertical-align hatte ich keinen Erfolg.
Dazu müsste man erst sicherstellen, dass der Div die volle Höhe hat. Dann könnte man evtl per absoluter Positionierung den Inhalt an Bottom:0 setzen. Evtl. gibt es auch bessere Lösungen
Gruß,
Harlequin