Ich habe wieder mal ein Problem mit der div-Positionierung und hoffe ihr könnt mir helfen.
Ausgangslage:
Ich habe ein zweispaltiges Layout. Die rechte Spalte hat eine feste Breite von 200px. Die linke Spalte ist variabel und soll den Rest der Seite ausfüllen. So weit so gut, aber zusätzlich sollte die linke Spalte eine Mindestbreite von 400px haben. Dies erreiche ich durch ein transparentes Bild, da der IE min-width nicht kennt.
Problem:
In einem kleinen Fenster wird die linke Spalte wie gewünscht mit 500px angezeigt. Die rechte Spalte wird aber am Fensterrand und nicht am rechten Rand des Body-Elements ausgerichtet. Wie kann ich dieses Problem beheben? Eine feste Breite will ich nicht definieren.
Ich danke Euch für die Unterstützung und wünsche einen wunderschönen Tag!
CODE
<html>
<head>
<style type="text/css">
.layout {
margin:10px;
padding:10px;
border:#000000 1px solid;
}
.links {
margin-right:230px;
border:#000000 1px solid;
}
.rechts {
width:200px;
float:right;
border:#000000 1px solid;
}
</style>
</head>
<body>
<div class="layout">
<div class="rechts"> rechts<br /><br /><br />test<br />test<br />test<br />test</div>
<div class="links"> links<br />
<br /><br />
<img src="leer.gif" width="500" height="70" alt="" />
</div>
</div>
</body>
</html>
Ausgangslage:
Ich habe ein zweispaltiges Layout. Die rechte Spalte hat eine feste Breite von 200px. Die linke Spalte ist variabel und soll den Rest der Seite ausfüllen. So weit so gut, aber zusätzlich sollte die linke Spalte eine Mindestbreite von 400px haben. Dies erreiche ich durch ein transparentes Bild, da der IE min-width nicht kennt.
Problem:
In einem kleinen Fenster wird die linke Spalte wie gewünscht mit 500px angezeigt. Die rechte Spalte wird aber am Fensterrand und nicht am rechten Rand des Body-Elements ausgerichtet. Wie kann ich dieses Problem beheben? Eine feste Breite will ich nicht definieren.
Ich danke Euch für die Unterstützung und wünsche einen wunderschönen Tag!
CODE
<html>
<head>
<style type="text/css">
.layout {
margin:10px;
padding:10px;
border:#000000 1px solid;
}
.links {
margin-right:230px;
border:#000000 1px solid;
}
.rechts {
width:200px;
float:right;
border:#000000 1px solid;
}
</style>
</head>
<body>
<div class="layout">
<div class="rechts"> rechts<br /><br /><br />test<br />test<br />test<br />test</div>
<div class="links"> links<br />
<br /><br />
<img src="leer.gif" width="500" height="70" alt="" />
</div>
</div>
</body>
</html>