[Erledigt] arges float Problem

30.04.2005, 13:09

Hallo Leute,

ich habe ein echtes Problem mit float. Ich habe einen Hauptcontainer "content" und zwei Untercontainer die sich dadrin befinden - content_left und content_right. Nun möchte ich, dass beide auf gleicher Höhe sind (left und right) Wenn ich nun content_left auf float: left; setze, rutscht mir der gesamte content Container nach unten. Warum? Hat jemand eine Lösung parat, dass es in allen Browsern gut aussieht und der content_left gleichhoch wie content_right ist. Anmerkung: in left und right werden unterschiedliche lange Einträge sein.

Code:

<!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>
	<title>test</title>
  <link href="main_style.css" rel="stylesheet" type="text/css" />
</head>

<body>
         
         <div id="content">
                 
                 <div id="content-left">
 	                 <div id="content-left2">
				Test
                          </div>
                 </div>
                 

                 <div id="content-right">
                         	

Hallo</p>
                 </div>

                 <div style="clear:both"></div>
         </div>
         

         <div class="clear"></div>
</body>
</html>

CSS-Datei:

Code:

body {
	margin:0;
	padding:0;
	background: #E0E0DE; /*url(img/bg.png) repeat-y 50% 0;*/
	font: 80% Arial, Helvetica, sans-serif;
}


#content {
	margin-left: 30px;
	margin-right: 220px;
	background: #FFFFFF url(content_pixel.gif) repeat-y top left;
         border: 2px solid #969696;
         border-top: 0px;
}



/* #content
----------------------------------------------- */
#content-left {
}
#content-left2 {
	padding-top: 10px;
}

#content-right {
	margin-left: 220px;
}
#content-right2 {
	padding-top: 10px;
}



/* misc
----------------------------------------------- */
.clear {
	clear: both;
}

derHund · 30.04.2005, 13:23

wenn es ein rein optisches problem ist: faux columns.
deine weiteren ausführungen verstehe ich nicht, ein online-beispiel wäre gut.

in css läßt sich keine abhängigkeit zwischen boxen darstellen.

30.04.2005, 13:28

Hi Hund,

was meinst du mit faux columns???

Hier mal das Beispiel:

http://www.mstredak.de/test/

http://www.mstredak.de/test/index.html
http://www.mstredak.de/test/main_style.css

Test und Hallo sollen auf einer Höhe sein .... Aber wenn ich float: left im linken container einsetze, rutsch der complette Container runter ...

30.04.2005, 13:36

Sie die Container gleich hoch? Hast du Align gesetzt? Valign gesetzt?

30.04.2005, 13:39

Ist ein bissel komisch angelegt

<div id="content">

<div id="content-left"> </div>
<div id="content-right"> </div>

</div>

Sollte eigentlich finktionieren.
Welche Aufgabe <div id="content-left2"> hat , weis ich auch nicht.

content kannst du mittig zentrieren.
Und ohne margin-right: 220px; ...

30.04.2005, 13:42

siehe Code ...
die Container haben keine Höhe, weil sie sich durch den Inhalt definieren!

habe weder align, noch valign gesetzt ... ich benutze doch nebeneianderliegende DIV Container ...

30.04.2005, 13:45

Beispiel:

http://www.cix88.de/cix_css/css_layo..._layout_2.html

30.04.2005, 13:45

zu CIX ... nee nee, das hat alles seine Bedeutung

content-left2 kann hierbei erstmal vernachlässigt werden - soll einfach nur für den Abstand oberhalb dienen(innerhalb von content-left) - das ist aber nicht das Problem. Content soll gerade nicht mittig sein - Content-right passt sich der Fensterbreite an und left und der Bereich neben right bleibt statisch.

die Struktur sollte unbedingt erhalten bleiben! - content right und left sollten sich in content befinden und nebeneinander stehen ...

30.04.2005, 13:55

So ?

http://www.cix88.de/cix_css/css_layo..._layout_3.html

30.04.2005, 14:31

Habe es jetzt so gemacht, dass der linke content eine fest Breite hat und der rechte keinen margin. Beide haben einen float.
THX an alle

Code:

#content-left {
	float: left;
         width: 220px;
}
#content-left2 {
	padding-top: 10px;
}

#content-right {
	float: left;
}
#content-right2 {
	padding-top: 10px;
}

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Thema bewerten
Thema bewerten:

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
[Erledigt] Galerie Problem...	coraplanet	PHP Tipps 2008	4	06.06.2008 13:42
Bereich um einen float left und float right Bereich	andrew22	HTML, Usability und Barrierefreiheit	8	27.02.2007 18:27
datensätze defekt oder problem mit dem einlesen?	Ministry	Datenbanken	4	06.07.2006 18:42
[CSS] Problem mit float	I-Spy	HTML, Usability und Barrierefreiheit	3	31.03.2006 17:08
problem!!!		PHP Tipps 2006	6	08.02.2006 11:06
[Erledigt] wieder ein Problem bei phpmailer und smtp		PHP Tipps 2006	24	07.02.2006 01:07
Float bei zwei DIVs		HTML, Usability und Barrierefreiheit	14	29.01.2006 10:54
problem mit div's		HTML, Usability und Barrierefreiheit	2	08.11.2005 18:55
[Erledigt] Problem mit mySQL		Datenbanken	7	27.09.2005 12:06
[Erledigt] Problem mit div, float und clear		HTML, Usability und Barrierefreiheit	2	09.09.2005 18:51
Firefox float Problem....	MortakArtos	HTML, Usability und Barrierefreiheit	1	14.01.2005 12:18
[Erledigt] Problem mit Übergabe einer Klasse in PHP4		PHP-Fortgeschrittene	10	08.01.2005 21:00
Problem mit Weiterleitung		PHP Tipps 2004-2	16	22.12.2004 17:49
Smarty und PHP-Skript Problem		PHP Tipps 2004-2	2	03.12.2004 22:27
Problem mit alter JavaScript-Funktion	woods	PHP Tipps 2004	1	13.08.2004 13:34


Mister Ad PHP Code Flüsterer Registriert seit: 21.08.2005 Beiträge: 4682 PHP-Kenntnisse: Fortgeschritten

30.04.2005, 13:23
derHund Erfahrener Benutzer Registriert seit: 29.10.2004 Beiträge: 1.781	wenn es ein rein optisches problem ist: faux columns. deine weiteren ausführungen verstehe ich nicht, ein online-beispiel wäre gut. in css läßt sich keine abhängigkeit zwischen boxen darstellen. __________________

30.04.2005, 13:28
Gast Beiträge: n/a	Hi Hund, was meinst du mit faux columns??? Hier mal das Beispiel: http://www.mstredak.de/test/ http://www.mstredak.de/test/index.html http://www.mstredak.de/test/main_style.css Test und Hallo sollen auf einer Höhe sein .... Aber wenn ich float: left im linken container einsetze, rutsch der complette Container runter ...

30.04.2005, 13:36
Gast Beiträge: n/a	Sie die Container gleich hoch? Hast du Align gesetzt? Valign gesetzt?

30.04.2005, 13:39
Gast Beiträge: n/a	Ist ein bissel komisch angelegt <div id="content"> <div id="content-left"> </div> <div id="content-right"> </div> </div> Sollte eigentlich finktionieren. Welche Aufgabe <div id="content-left2"> hat , weis ich auch nicht. content kannst du mittig zentrieren. Und ohne margin-right: 220px; ...

30.04.2005, 13:42
Gast Beiträge: n/a	siehe Code ... die Container haben keine Höhe, weil sie sich durch den Inhalt definieren! habe weder align, noch valign gesetzt ... ich benutze doch nebeneianderliegende DIV Container ...

30.04.2005, 13:45
Gast Beiträge: n/a	Beispiel: http://www.cix88.de/cix_css/css_layo..._layout_2.html

30.04.2005, 13:55
Gast Beiträge: n/a	So ? http://www.cix88.de/cix_css/css_layo..._layout_3.html

30.04.2005, 14:31
Gast Beiträge: n/a	Habe es jetzt so gemacht, dass der linke content eine fest Breite hat und der rechte keinen margin. Beide haben einen float. THX an alle Code: #content-left { float: left; width: 220px; } #content-left2 { padding-top: 10px; } #content-right { float: left; } #content-right2 { padding-top: 10px; }