• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

divs dynamisch nebeneinander

Status
Für weitere Antworten geschlossen.
S

scales

Neues Mitglied
hi

ich will eine einfache website aus drei divs machen:
oben ein banner div, darunter ein menü div links und ein div für den content rechts.
das banner div ist kein problem, aber bei den anderen beiden hakts:
beim menü div ist float so eingestellt dass der div für den content rechts vorbeiläuft.
dabei gibts allerdings zwei probleme:

1. auf den content seiten bei denen der content länger ist wie das menü, fliest der content links unter das menü (allerdings ist der menüinhalt dynamisch, es soll also keine breite eingetragen werden)
2. das menü div soll eigentlich bis ganz unten ans ende vom browser fenster gehen, jedoch ändert sich durch height: 100% gar nichts.

hier noch das konkrete aussehen von den divs:
Code: 
body
{
  background-color: #3f7fbf;
  font-family: verdana;
}

div.header
{
  background-color: #7f7f7f;
  padding-left: 64px;
  padding-top: 32px;
  padding-bottom: 32px;
  color: white;
  font-size: 64px
}

div.menue
{
  float: left;
  padding-left: 16px;
  padding-top: 16px;
  padding-right: 16px;
  padding-bottom: 16px;
}

div.main
{
  background-color: #ffffff;
  padding-left: 16px;
  padding-top: 16px;
}
 
Float ohne width

Gebe .main mal ebenfalls ein float: left;
Umspanne beide gefloateten Boxen mit einem weiteren <div>.
Innerhalb des umschließenden <div>s brichst du den Float mit clear ab.
html
Code: 
<div class="header">
</div>

<div id="spalten">

<div class="menue">
</div>

<div class="main">
</div>

</div><!--Ende #spalten-->
Entweder du fügst noch ein weiteres Element nach .main ein und gibst diesem clear: both;
Oder du clearst mit dem sogenannten clearfix (pseudoklasse :after css3)
css
Code: 
  body
{
  background-color: #3f7fbf;
  font-family: verdana;
}

div.header
{
  background-color: #7f7f7f;
  padding-left: 64px;
  padding-top: 32px;
  padding-bottom: 32px;
  color: white;
  font-size: 64px
}



/*clearen*/
[COLOR=DarkRed]#spalten:after {
content: "floatbreak";
display: block;
clear: both;
visibility: hidden;
height: 0;
}[/COLOR]

div.menue
{
  float: left;
  padding-left: 16px;
  padding-top: 16px;
  padding-right: 16px;
  padding-bottom: 16px;
}

div.main
{
[COLOR=DarkRed]float: left;[/COLOR]
  background-color: #ffffff;
  padding-left: 16px;
  padding-top: 16px;
}
Der IE bis Vers. 7 kennt :after noch nicht. dafür cleart er automatisch wenn eine Höhe bzw. Mindesthöhe für das Elternelement angegeben wurde:
Code: 
/*autoclear IE5 bis IE6*/
* html #spalten {
height: 1%;
}

/*autoclear IE7*/
* +html #spalten {
min-height: 1%;
}




height: 100%; geht immer vom Elternelement aus.
In deinem Beispiel würde das nicht so einfach funktionieren weil der Header eine feste Höhe in px hat.
Du müsstest den Elternelementen (<html> und <body>) ebenfalls eine Höhe von 100% geben.
Wenn .menue height:100%; von body hat würde .menue über das Browserfenster hinausragen. (.menue {height:100%} + Höhe von .header).

Ein ständiger, vertikaler Scrollbalken währe die Folge.
 
Zuletzt bearbeitet:
so funktioniert das irgendwie nicht.
1. wenn ich main auch float: left gebe, wird das main div unter das menue div gesetzt, egal ob ich ein zusätzliches umschließendes div habe oder nicht.
2. durch das hidden in dem umschließenden div werden menue und main nicht mehr angezeigt, wenn ichs weg mach steht dafür der text "floatbreak" unter main.

das einzige was bis jetzt geklappt hat ist menue eine feste breite zu geben und main mit margin weg zu schieben, aber dann ist das ganze nicht mehr dynamisch
 
scales schrieb:
....
1. wenn ich main auch float: left gebe, wird das main div unter das menue div gesetzt, egal ob ich ein zusätzliches umschließendes div habe oder nicht.
2. durch das hidden in dem umschließenden div werden menue und main nicht mehr angezeigt, wenn ichs weg mach steht dafür der text "floatbreak" unter main.
Zum Vergrößern anklicken....
1. Ja, das ist das dynamische an der Sache. Wenn die beiden Boxen nicht nebeneinander passen werden sie untereinander dargestellt.
Wenn du das verhindern willst musst du Breiten angeben (Können auch prozentuelle Angaben sein ) .

2. kann ich ohne Link / Quelltext nicht nachvollziehen.

Hier habe ich es zur Ansicht online gestellt:
float ohne width

Damit der Beispieltext neben .menue passt, habe ich .main eine maximale Breite von 50% gegeben. (max-width: 50%; )
 
klar, wenn ich max-width angeb gehts, aber ich wlls ja grade ohne schaffen.
das menü div hat immer text + 16px rand an jeder seite und das main div bekommt den rest.
das scheint mit xhtml aber nicht zu gehen, da werd ich wohl auf javascript zurückgreifen müssen.
 
Mit (X)HTML geht sowas auch nicht, das ist reines CSS.
Und auf JavaScript zurückzugreifen fürs Layout halte ich für etwas arg gefährlich. Die Site muss ja weiterhin funktionieren, wenn JS deaktiviert ist.
 
Status
Für weitere Antworten geschlossen.

Neueste Beiträge

Zurück
Oben