Divs über float anordnen

Jass

Jass

Aktives Mitglied
Thread Starter
Dabei seit
10.02.2007
Beiträge
1.254
Reaktionspunkte
105
Hallo

Ich möchte gerne verschiedene <div> in einem anderen <div> Tag über "float" nebeneinander anordnen.

Dh ich habe ein <div> als box für die ganze Seite, der zB 800px breit ist. jetzt tue ich da zwei weitere <div> rein, einen für Content und einen für ein Menu. Wenn ich jetzt aber die beiden <div> mit "float" nebeneinander anordnen will werden sie immer unterhalb der box angezeigt, obwohl sie eig noch drinnen sein müssten. :(

Weiß jemand was zu tun ist?
oder wo gibt es zu diesem Thema ein ausführlichen Toturial?

Hoffe mal das ich das halbwegs verständlich erklären konnte, sonst einfach noch mal fragen ;)

mfg
 
Jass schrieb:
Hallo

Ich möchte gerne verschiedene <div> in einem anderen <div> Tag über "float" nebeneinander anordnen.

Dh ich habe ein <div> als box für die ganze Seite, der zB 800px breit ist. jetzt tue ich da zwei weitere <div> rein, einen für Content und einen für ein Menu. Wenn ich jetzt aber die beiden <div> mit "float" nebeneinander anordnen will werden sie immer unterhalb der box angezeigt, obwohl sie eig noch drinnen sein müssten. :(

Weiß jemand was zu tun ist?
oder wo gibt es zu diesem Thema ein ausführlichen Toturial?

Hoffe mal das ich das halbwegs verständlich erklären konnte, sonst einfach noch mal fragen ;)

mfg
Zum Vergrößern anklicken....

Versuch mal den beiden divs ne feste Breite zuzuweisen.
 
Jass schrieb:
Haben sie schon...aber es geht trotzdem nicht :(
Zum Vergrößern anklicken....

Hast du denn die "BOX", also die große, wo die anderen zwei rein sollen, über den ganzen Bildschirm? Wenn ja, kannst du die ja quasi weglassen. Wenn nicht, muß die natürlich auch eine Breite und Höhe zugewiesen bekommen.
Oder hat sie das auch schon? Und sie darf nicht gefloatet werden.

Also ich vermute mal dein Gerüst sieht so aus?

<html>
<head>...</head>
<body>
<div><!-- deine große Box -->
<div>...</div><!-- Menu -->
<div>...</div><!-- Content -->
</div>
</body>
</html>

Kommt das hin? Dann kann ich mir besser Gedanken über die CSS machen.
 
@ FiffiWM2006 jop etwas so...

Aber hab eben eine Lösung gefunden, wenn man der großen Box die Eigenschaft "Overflow: hidden" zuweist passt sie sich an die Länge der beiden gefloateten kleinen boxen an. :)

Aber wo kann man schauen wie das auf zB IE aussieht? da gibt's doch Sites die die Vorschau auf anderen Browsern simulieren...?:confused:
 
Jass schrieb:
@ FiffiWM2006 jop etwas so...

Aber hab eben eine Lösung gefunden, wenn man der großen Box die Eigenschaft "Overflow: hidden" zuweist passt sie sich an die Länge der beiden gefloateten kleinen boxen an. :)
Zum Vergrößern anklicken....

Das sollte sie aber eigentlich auch ohne diese Angabe tun. Bei mir ist es zumindest so. Allerdings habe ich auch grad nur mit dem Firefox experimentiert. Vielleicht benutzt du ja grad IE?

Jass schrieb:
Aber wo kann man schauen wie das auf zB IE aussieht? da gibt's doch Sites die die Vorschau auf anderen Browsern simulieren...?:confused:
Zum Vergrößern anklicken....

HA! O.K. Damit hat sich meine Frage erübrigt. Ja die gibt es. Aber hab grad keinen Link.

Aber versuchs mal so:

Code: 
#bigbox {
	height: 100%;
	border: 1px solid red;
}

#menu {
	float: left;
	width: 20%;
	height: 100%;
	border: 1px solid aqua;
}

#inhalt {
	height: 100%;
	border: 1px solid green;
}

Du brauchst das Contentdiv ja nicht floaten lassen, wenn du es direkt neben dem Menu haben willst. (Die Rahmen habe ich mir nur als Hilfe eingebaut!)

Und falls du deine "Bigbox" bis an die Browserränder haben willst, was ja Sinn machen würde, dann füge das noch ein:

Code: 
body {
     margin: 0;
     padding: 0;
}
 
Zuletzt bearbeitet:
Jass schrieb:
Aber wo kann man schauen wie das auf zB IE aussieht? da gibt's doch Sites die die Vorschau auf anderen Browsern simulieren...?:confused:
Zum Vergrößern anklicken....

Manchmal sieht man den Baum vor lauter Wäldern nicht, oder so. Wenn du Firefox benutzt, dann gibt es ein sehr nützliches PlugIn, mit dem man sehr leicht innerhalb eines Browsertabs zwischen Firfox und IE hin- und herswitchen kann. Heißt "IE Tab".
 
Kompatibel mit:

* Firefox Firefox: 1.5 – 3.0a5

Installieren
IE Tab ist für MacOSX nicht verfügbar.
Zum Vergrößern anklicken....

:( :(

Kann mir sonst noch mal wer eine Site sagen wo ich das prüfen kann :confused:

@ FiffiWM2006

Werde deine Idee glaich mal ausprobieren :) danke!
 
Jass schrieb:
Hallo

Ich möchte gerne verschiedene <div> in einem anderen <div> Tag über "float" nebeneinander anordnen.

Dh ich habe ein <div> als box für die ganze Seite, der zB 800px breit ist. jetzt tue ich da zwei weitere <div> rein, einen für Content und einen für ein Menu. Wenn ich jetzt aber die beiden <div> mit "float" nebeneinander anordnen will werden sie immer unterhalb der box angezeigt, obwohl sie eig noch drinnen sein müssten. :(

Weiß jemand was zu tun ist?
oder wo gibt es zu diesem Thema ein ausführlichen Toturial?

Hoffe mal das ich das halbwegs verständlich erklären konnte, sonst einfach noch mal fragen ;)

mfg
Zum Vergrößern anklicken....

also das hier klappt bei mir einwandfrei:

PHP: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Unbenanntes Dokument</title>
</head>

<body>
<div style="width:800px;">
<div style="width:200px; float:left">menue</div>
<div style="width:600px; float:left">hier is wohl der content or whatever</div>
<br clear="all" />
</div>
</body>
</html>

vielleicht
PHP: 
<br clear="all" />
vergessen?
 
Also danke für die Antworten, hab das Problem gelöst :) :)


Aber ich muss noch eine Frage hinterher schieben:

Wie kann ich ein Bild in einem <div> vertikal positionieren :confused:
 
Du musst dich einloggen oder registrieren, um hier zu antworten.
Zurück
Oben Unten