CSS - zweispaltiges Layout

QuadCoreGamer · 24. Oktober 2009, 18:03

Hallo,

wie kann ich mit CSS ein zweispaltiges Layout coden? Habe schon einiges probiert, jedoch hat noch nichts funktioniert. Hier mal mein HTML-Code:

Quellcode

<html>
<head>
<title>Test-Website</title>
<style type="text/css">
div {
width:776px;
height:424px;
background-color:white;
position: absolute;
left:50%;
margin-left:-388px;
top:50%;
margin-top:-212px;
}
</style>
</head>
<body background="background.png">
<body>
<div>
Ein Text...
</div>
</body>
</html>

Alles anzeigen

umt · 24. Oktober 2009, 21:46

Äh..wo sind denn deine Spalten?

Sollen die in das div rein?
Dann machst du dort eben noch zwei divs rein, gibst ihnen eine feste Breite und lässt sie per CSS floaten.

"css float" lautet also dein Stichwort bei Google (oder einer anderen Suchmaschine).

Gnah · 26. Oktober 2009, 13:45

Quellcode

<html>
<head>
<style>
* {
margin: 0;
padding: 0;
} .container {
width: 800px;
margin: auto;
} .header {
width: 800px;
height: 100px;
background-color: #699915;
} .links {
width: 400px;
height: 800px;
float: left;
background-color: #158699;
} .rechts {
width: 400px;
height: 800px;
float: right;
background-color: #99157c;
}
</style>
</head>
<body>
<div class="container">
<div class="header">
Logo
</div>
<div class="links">
Linke Spalte
</div>
<div class="rechts">
Rechte Spalte
</div>
</div>
</body>
</html>

Alles anzeigen

Hier ein kleines Beispiel.
Als html abspeichern und anschauen (:.

Torben Brodt · 26. Oktober 2009, 18:16

einen tollen Artikel gibts auch bei selfhtml: aktuell.de.selfhtml.org/weblog/css-spaltenlayout

CSS - zweispaltiges Layout

CSS - zweispaltiges Layout

Quellcode

Quellcode

Teilen

Benutzer online 1

Tags