Zwei DIV's mit float in anderem DIV Container

mnitsch · #1 (**permalink**) 09.05.2007, 15:47

Ich hab ein kleines Problem mit ineinander verschachtelden DIVS.
Ich habe ein Main-Div was zentriert sein sonn und als Background Weiss. Darin folgen der Header mit Logo, Menü und Suche.

Unter dem Header soll dann der Content-Bereich wo ich wieder zwei DIV's brauche die mit float left und right nebeneinander sollen.

Das stellt allerdings kein Browser vernünftig dar. Wo liegt das Problem? Ich hab sowas meiner Meinung schonmal hinbekommen nur komm ich nicht an die alten Dateien da mein Notebook grad zur Reparatur ist.

Ich poste mal den Code von HTML und CSS:

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>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link href="templatestyle.css" rel="stylesheet" media="screen" />
<title>Neue Apotheke Template</title>
</head>

<body>

	<!-- Main -->
	<div id="main">
		<!-- Top Seasonal -->
		<div id="top">
		  <!-- Top Search -->
		  <div id="top_search">
		  	Suchfeld
		  </div>
		  <div id="top_logo">
		  </div>
		  <!-- Top Main Menu -->
		  <div id="top_mainmenu">
		  	Hauptmenü
		  </div>
		  <!-- Tup Sub Menu -->
		  <div id="top_submenu">
		  	Untermenu
		  </div>
		</div>
		<!-- Content -->
		<div id="content">
			<div id="content_left">Links</div>
			<div id="content_right">Rechts</div>
		</div>
		<div id="footer">
		  Footer
		</div>
	</div>
	
</body>
</html>

Code:

/* CSS Document */
/* Neue Apotheke - Home */

body {
	background-image: url(scanlines.gif);
  	font-family: Verdana, Geneva, Arial, helvetica, sans-serif;
  	font-size: 10px;
	text-align: center;
	margin: 0px;
	padding: 0px;
}

#main {
	width: 720px;
	height: 100%;
	background-image: url(background_main.gif);
	text-align: left;
	padding-left: 1px;
	padding-right: 1px;
}
#top {
	width: 718px;
	height: 100%;
	background-image: url(sunflower.jpg);
	background-repeat: no-repeat;
	text-align: left;
}

#top_search {
	width: 718px;
	height: 20px;
	background: #CCCCCC;
	text-align: right;
	border-bottom: #666666 solid 1px; 
}

#top_logo {
	width: 394px;
	height: 69px;
	margin-left: 20px;
	margin-top: 55px;
	background-image: url(logo.png);
	background-repeat:no-repeat;
}

#top_mainmenu {
	width: 718px;
	height: 50px;
	margin-top: 44px;
	background: #FF0000;
	text-align: left;
	border-bottom: #666666 solid 1px;
	border-top: #666666 solid 1px; 
}

#top_submenu {
	width: 718px;
	height: 20px;
	background: #CCCCCC;
	text-align: left;
	border-bottom: #666666 solid 1px; 
}

#content {
	width: 718px;
	height: 100%px;
	text-align: left;
	border-bottom: #666666 solid 1px; 
}

#content_left {
	width: 480px;
	height: 100%;
	text-align: left;
	float: left;
}

#content_right {
	width: 238px;
	height: 100%;
	text-align: left;
	float: right;
}

#footer {
	width: 718px;
	height: 20px;
	background: #CCCCCC;
	text-align: right;
	border-bottom: #666666 solid 1px;
}

fricca · #2 (**permalink**) 09.05.2007, 16:26

Zitat:

Zitat von mnitsch

Das stellt allerdings kein Browser vernünftig dar.

Und was wäre deiner Meinung nach "vernünftig"?

Zitat:

Wo liegt das Problem?

Wo das Problem liegt, solltest du hier schildern. Siehe auch: http://xhtmlforum.de/40080-fuer-frag...twortende.html
Nenne betroffene Browser und beschreibe, was an der jeweiligen Darstellung nicht deiner Vorstellung entspricht.
Dann kann dir vielleicht auch jemand eine Lösung zu deinem Problem nennen.

mnitsch · #3 (**permalink**) 09.05.2007, 16:33

Ich habs mitlerweile gelöst.
Problem war das die gefloateten Divs aus dem umragenden rauslaufen.

Clearen hilft Wunder

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
Schriftfarbe in den Eintragungsfeldern von jforms	Steveislucky	CSS	2	16.03.2010 10:59
DIV container verschachteln und pixelgenau platzieren	Yakilo	CSS	4	02.02.2010 19:18
div & float & Breitenanpassung - unschönes Überlagern	nyo	CSS	2	12.11.2008 12:36
joomla template entschlüsseln	nieselfriem	CSS	2	18.03.2008 13:12
1 div links, 2 div's untereinander daneben	jensr	CSS	9	30.06.2004 23:41