✔ Eine fixierte Div-Box

Status
Nicht offen für weitere Antworten.
S

slaughter89

Mitglied
[erledigt] Eine fixierte Div-Box

Hi,
leider kenne ich mit CSS überhaupt nicht gut aus. Ich beschäftige mich eher mit PHP.

Nun brauch ich aber CSS und hoffe daher auf euere Hilfe:


Ich möchte eine Seite machen, die in zwei Spalten aufgeteilt ist:
Eine links und eine rechts. Auf der linken sollen Links oder Werbung stehen und auf der rechten der Inhalt der Seite.
Die Breite der linken Spalte soll z.B 100 Pixel breit sein. Die rechte Spalte soll den Rest der Seite ausfüllen.
Nun soll die linke Spalte fixiert sein. Das heißt, wenn ich weiter runter scrolle, dann soll die linke Div nicht runter scrollen, sondern nur die rechte Spalte.

Wäre nett, wenn mir da jemand das Grundgerüst dafür geben könnte.
 
Zuletzt bearbeitet:
Erstmal vielen Dank für die Hile.

Folgendes habe ich schon hinbekommen:
http://basti2web.de/tools/

Wie bekomme ich das hin, dass der Inhalt der rechten Div nicht von der linken Div überschrieben wird?

Und kann mir das jemand so umbauen, dass der oben genannte Fix dabei ist?

Danke und mfg
Basti
 
Code: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
          "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>position</title>

<style type="text/css">
* { margin:0; padding:0; }

body { height:100%; overflow-y:auto; }

#fixed { position:fixed; width:160px; height:100%; background-color:#afa; border:1px solid #888; }

#page { background-color:#ff0000; padding-left:162px; }
</style>
<!--[if lt IE 7]>
<style type="text/css">
html { overflow-x:auto; overflow-y:hidden; }
#fixed { position:absolute; }
</style>
<![endif]-->

</head>
<body>

<div id="fixed">
fixed
</div>

<div id="page">
     <p>page inhalt blaaaaaaaaaaaaaaaa</p>
     <p>page inhalt blaaaaaaaaaaaaaaaa</p>
     <p>page inhalt blaaaaaaaaaaaaaaaa</p>
     <p>page inhalt blaaaaaaaaaaaaaaaa</p>
     <p>page inhalt blaaaaaaaaaaaaaaaa</p>
     <p>page inhalt blaaaaaaaaaaaaaaaa</p>
     <p>page inhalt blaaaaaaaaaaaaaaaa</p>
     <p>page inhalt blaaaaaaaaaaaaaaaa</p>
     <p>page inhalt blaaaaaaaaaaaaaaaa</p>
     <p>page inhalt blaaaaaaaaaaaaaaaa</p>
     <p>page inhalt blaaaaaaaaaaaaaaaa</p>
     <p>page inhalt blaaaaaaaaaaaaaaaa</p>
     <p>page inhalt blaaaaaaaaaaaaaaaa</p>
     <p>page inhalt blaaaaaaaaaaaaaaaa</p>
     <p>page inhalt blaaaaaaaaaaaaaaaa</p>
     <p>page inhalt blaaaaaaaaaaaaaaaa</p>
     <p>page inhalt blaaaaaaaaaaaaaaaa</p>
     <p>page inhalt blaaaaaaaaaaaaaaaa</p>
     <p>page inhalt blaaaaaaaaaaaaaaaa</p>
     <p>page inhalt blaaaaaaaaaaaaaaaa</p>
     <p>page inhalt blaaaaaaaaaaaaaaaa</p>
     <p>page inhalt blaaaaaaaaaaaaaaaa</p>
     <p>page inhalt blaaaaaaaaaaaaaaaa</p>
     <p>page inhalt blaaaaaaaaaaaaaaaa</p>
     <p>page inhalt blaaaaaaaaaaaaaaaa</p>
     <p>page inhalt blaaaaaaaaaaaaaaaa</p>
     <p>page inhalt blaaaaaaaaaaaaaaaa</p>
     <p>page inhalt blaaaaaaaaaaaaaaaa</p>
     <p>page inhalt blaaaaaaaaaaaaaaaa</p>
     <p>page inhalt blaaaaaaaaaaaaaaaa</p>
     <p>page inhalt blaaaaaaaaaaaaaaaa</p>
     <p>page inhalt blaaaaaaaaaaaaaaaa</p>
     <p>page inhalt blaaaaaaaaaaaaaaaa</p>
     <p>page inhalt blaaaaaaaaaaaaaaaa</p>
     <p>page inhalt blaaaaaaaaaaaaaaaa</p>
     <p>page inhalt blaaaaaaaaaaaaaaaa</p>
     <p>page inhalt blaaaaaaaaaaaaaaaa</p>
     <p>page inhalt blaaaaaaaaaaaaaaaa</p>
     <p>page inhalt blaaaaaaaaaaaaaaaa</p>
     <p>page inhalt blaaaaaaaaaaaaaaaa</p>
     <p>page inhalt blaaaaaaaaaaaaaaaa</p>
     <p>page inhalt blaaaaaaaaaaaaaaaa</p>
     <p>page inhalt blaaaaaaaaaaaaaaaa</p>
     <p>page inhalt blaaaaaaaaaaaaaaaa</p>
     <p>page inhalt blaaaaaaaaaaaaaaaa</p>
     <p>page inhalt blaaaaaaaaaaaaaaaa</p>
     <p>page inhalt blaaaaaaaaaaaaaaaa</p>
     <p>page inhalt blaaaaaaaaaaaaaaaa</p>
     <p>page inhalt blaaaaaaaaaaaaaaaa</p>
     <p>page inhalt blaaaaaaaaaaaaaaaa</p>
     <p>page inhalt blaaaaaaaaaaaaaaaa</p>
     <p>page inhalt blaaaaaaaaaaaaaaaa</p>
     <p>page inhalt blaaaaaaaaaaaaaaaa</p>
     <p>page inhalt blaaaaaaaaaaaaaaaa</p>
     <p>page inhalt blaaaaaaaaaaaaaaaa</p>
     <p>page inhalt blaaaaaaaaaaaaaaaa</p>
     <p>page inhalt blaaaaaaaaaaaaaaaa</p>
     <p>page inhalt blaaaaaaaaaaaaaaaa</p>
     <p>page inhalt blaaaaaaaaaaaaaaaa</p>
     <p>page inhalt blaaaaaaaaaaaaaaaa</p>
     <p>page inhalt blaaaaaaaaaaaaaaaa</p>
     <p>page inhalt blaaaaaaaaaaaaaaaa</p>
     <p>page inhalt blaaaaaaaaaaaaaaaa</p>
</div>

</body>
</html>
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück