DIV wächst nicht mit

[modstyle]

Hi!

Folgender HTML-Code:

<div id="menu">
			<div id="left" class="left mainmenu">
				<a href="faq.php">FAQ</a>
				<a href="search.php">Suchen</a>
				<a href="memberlist.php">Mitgliederliste</a>
				<a href="groupcp.php">Benutzergruppen</a>

				<a href="profile.php?mode=editprofile">Profil</a>
				<a href="privmsg.php?folder=inbox">Du hast keine neuen Nachrichten</a>
			</div>
			<div id="right" class="right mainmenu">
				<a href="login.php?logout=true&amp;sid=62caf9b27b6b2e749147d3efc484b348">Logout [ modstyle ]</a>
			</div>
		</div>

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

steht in einer Tabellenzelle und wird von einer Tabelle gefolgt. Das Menü ist via CSS folgendermaßen formatiert:

#menu {
	height: auto;
	padding: 10px;
	background-color: #065A89;
	}

#menu #left a {
	padding-right: 10px;
	font-size: 12px;
	font-weight: bold;
	color: white;
	}

#menu #right a {
	padding-left: 10px;
	font-size: 12px;
	font-weight: bold;
	color: white;
	}

.mainmenu {
	line-height: 16px;
	height: auto;
}

Das Problem ist nun, dass der Container "menu" nicht mitwächst, obwohl height auf auto gestellt ist.
Wenn die Auflösung bzw. das Browserfenster kleiner werden, dann müssen die Menüpunkte umbrochen werden, was auch passiert aber der DIV-Container behält seine Größe bei, so dass die Punkte einfach nur drüber hängen.

Jemand eine Idee wie ich "menu" (mit dem blauen Hintergrund) dazu bringen kann mitzuwachsen? Danke für die Hilfe!

 

[Maik]

Notier mal das DIV .clear in dem DIV #menu nach den floatenden DIVs.

 

[modstyle]

Hi!

Danke für den Hinweis! Nun funktioniert es genauso wie es soll .

Zum Thema floats habe ich auch direkt noch eine Frage, weil es hier grad so gut passt :
Wenn ich in einem DIV zwei Bilder nebeneinander setzen möchte und diese mit float: left und margin: 0 und padding: 0 formatiere, dann werden sie auch im IE 6 und Firefox korrekt nebeneinander dargestellt.
Leider zeigt der IE 5.5 diese trotz des Floats untereinander an.
Kann man da etwas gegen tun oder muss man auf Tabellen zurückgreifen?

Danke für die Hilfe!

 

[Maik]

Grundsätzlich sollte es auch im IE5.5 funktionieren.

Wie sieht denn der vollständige Quellcode (HTML + CSS) des Dokuments aus?

 

[modstyle]

Hi!

<div id="rahmen">
<div id="header">
<img src="gfx/paul1.jpg" width="409" height="294" alt="Titelgrafik mit Jungen und Pinsel" /><img src="gfx/paul2.gif" width="454" height="294" alt="Titelgrafik2" />
</div>
<div id="leiste">
<h1>Titel</h1>
</div>

... und der zugehörige CSS-Code:

BODY {
	margin: 0px;
         padding: 0px;
         background-image: url('gfx/menu_bg.gif');
         background-repeat: repeat-y;
         background-color: #FDFADD;
}

/* Rahmen mit horizontalem Hintergrund (violette Leiste oben) und Kopfbereich */

#rahmen {
	width: 100%;
         background-image: url('gfx/leiste_top.gif');
         background-repeat: repeat-x;
}

#header {
	width: 863px;
         height: 294px;
         margin: 0px;
         padding: 0px;
}

#header IMG {
	margin: 0px;
         padding: 0px;
         display: block;
         float: left;
}


/* Trennleiste mit Schriftzug */

#leiste {
	width: 863px;
         height: 28px;
         margin: 0px;
         padding: 0px;
         background-image: url('gfx/leiste.gif');
         background-repeat: no-repeat;
         clear: both;
}

#leiste H1 {
	font-family: arial,sans-serif;
         font-size: 14px;
         font-weight: bold;
         color: #2A1A5D;
         margin: 0px;
         padding: 4px 0px 0px 80px;
}

Vor dem geposteten HTML-Code fängt der BODY-Tag an und dahinter sind noch DIV-Container für Menü und Inhalt aber die werden sich wohl kaum auf den Header-Bereich auswirken!

 

[Maik]

Mit der folgenden CSS-Regel lässt sich der "3-Pixel-Bug" im IE beheben:

#header img {
        margin: 0 !important; /* Für moderne Browser */
        margin: 0 -3px; /* Für IE */
        padding: 0px;
        display: block;
        float: left;
}