Hallo Community,
ich möchte zwei DIV's nebeneinander platzieren.
Eins davon hat eine feste Breite und floatet, das andere soll dabei dynamisch sich der restlichen Breite anpassen.
So sieht der Code dazu aus:
Allerdings zerhackt es mir, sobald ich in "content" bzw "sidebar" noch andere Elemente habe, welche ebenfalls floaten, irgendwann das ganze Layout.
Das ganze sieht dann (am Beispiel von News) in etwa so aus: http://www.myimg.de/?img=Unbenannt228379.jpg
Oben ist der erste Artikel zusehen, dann folgt ein riesiger Freiraum gefolgt von den ordentlich formatierten News.
Als alternative dazu hätte ich noch folgende Struktur:
Allerdings benutze ich hierbei "display:table" und Tabellenlayouts gehören ja schon lange nicht mehr zum guten Ton bzw. sind ein Unding.
Wie funktioniert das also sauber?
ich möchte zwei DIV's nebeneinander platzieren.
Eins davon hat eine feste Breite und floatet, das andere soll dabei dynamisch sich der restlichen Breite anpassen.
So sieht der Code dazu aus:
HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Test 2</title>
<style>
.wrap{
width:900px;
margin:auto;
background:#00f;
}
.sidebar{
width:300px;
height:500px;
background:#f00;
float:right;
}
.clearfix{
clear:both;
}
.content{
margin:0 300px 0 0;
height:400px;
background:#0f0;
}
</style>
</head>
<body>
<div class="wrap">
<div class="sidebar"></div>
<div class="content"></div>
<div class="clearfix"></div>
</div>
</body>
</html>Das ganze sieht dann (am Beispiel von News) in etwa so aus: http://www.myimg.de/?img=Unbenannt228379.jpg
Oben ist der erste Artikel zusehen, dann folgt ein riesiger Freiraum gefolgt von den ordentlich formatierten News.
Als alternative dazu hätte ich noch folgende Struktur:
HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Test</title>
<style>
.wrap{
width:900px;
margin:auto;
background:#00f;
display:table;
}
.sidebar{
width:300px;
background:#f00;
height:500px;
display:table-cell;
vertical-align:top;
}
.content{
background:#0f0;
display:table-cell;
vertical-align:top;
}
</style>
</head>
<body>
<div class="wrap">
<div class="content"></div>
<div class="sidebar"></div>
</div>
</body>
</html>Wie funktioniert das also sauber?
