Problem mit Div-Layout

[Lohgock-Trainer]

Hi,
Ich habe ein neues Problem mit einem Div-Layout. Ich möchte nun eine linke Spalte die immer 160px breit sein soll. Die andere soll den Restpaltz einnehmen. Mit einem Tabellen-Layout ist dies kein Problem allerdings kmom ich mit dem Div-Laout nicht klar.

[S2B]

Versuch mal sowas:

Code: Alles auswählen

<div style="float: left; width: 160px">
  links
</div>
<div style="margin-left: 160px">
  rechts
</div>

[fanrpg]

Code: Alles auswählen

<div style="width:100%;">
<div style="width:160px; float:left; margin-right:2px;">
Linke Spalte
</div>
<div style="width:auto; float:right;">
Rechte Spalte
</div>
</div>

Das sollte an sich funktionieren.

[Lohgock-Trainer]

Danke, S2B's Variante klappt fabelhaft. Ist dies auch mit einem 3 Spalten LAyout möglich ni dem die 3. Spalte ebenfalls 160px haben soll?

[Pyramide]

Viertes Google-Ergebnis: http://www.stichpunkt.de/css/bereiche.html

[Lohgock-Trainer]

Design läuft ganz gut, nur im IE gibt es ein Problem.

Code: Alles auswählen

	<div id="topbar">Topbar</div>
	<div id="nav-l">
		<img src="001.png" />
		<div class="navlink"><a href="./news.php">Link 1</a></div>
		<div class="navlink">Link 2</div>
		<img src="002.png" />
	</div>
	<div id="nav-r">
		<img src="002.png" />
		<div class="navlink">Picture of Me</div>
	</div>
	<div id="main">
		<p>Text auf der Inhaltseite</p>
		<p>Natürlich kommt hier noch mehr ;)</p>
		<table width="100%" border="1" cellspacing="0" cellpadding="0">
		  <tr>
			<td>&nbsp;</td>
			<td>&nbsp;</td>
		  </tr>
		  <tr>
			<td>&nbsp;</td>
			<td>&nbsp;</td>
		  </tr>
		  <tr>
			<td>&nbsp;</td>
			<td>&nbsp;</td>
		  </tr>
		</table>
	</div>
	<div id="footer">Copyright</div>

Code: Alles auswählen

#nav-l {
	float: left;
	width: 160px;
	border: 1px solid #000000;
	background: #006699;
	color: #FFFFFF;
}
#nav-r {
	float: right;
	width: 160px;
	border: 1px solid #000000;
	background: #006699;
	color: #FFFFFF;
}
#main {
	margin-left: 170px;
	margin-right: 170px;
	border: 1px solid #000000;
	padding: 2px;
	background: #CCCCCC;
}
#footer {
	width: auto;
	border: 1px solid #000000;
	background: #006699;
	color: #FFFFFF;
	margin: 5px;
}
.navlink {
	font-size: 11px;
}
.navlink a:link, .navlink a:visited {
	color: #FFFFFF;
	text-decoration: none;
	display: block;
}
.navlink a:hover {
	background: #0099CC;
	text-decoration: none;
}
.navlink a:active {
	background: #0099CC;
	text-decoration: none;
}

Doch nun kann man im IE nicht mehr die Links in der nav-l oder nav-r. Woran liegt das und was kann man tun?

Hier mal ein Link

[S2B]

Ich kann jetzt im Moment nur mutmaßen, aber versuch doch mal, die rechte Box über die linke Box zu schreiben.

[Lohgock-Trainer]

Wie genau?

[S2B]

Code: Alles auswählen

<div class="nav_r">
  [...]
</div>

<div class="nav_l">
  [...]
</div>

[Lohgock-Trainer]

bringt nichts, warum sollte es auch?