Frage stellen
ich bin CSS neuling und versuche mich gerade daran ein Layout ohne Tabellen zu gestalten.
Soweit so gut. Ich habe nur ein Problem.
Ich habe den Header, unter diesem die Navileiste und unter dieser befinden sich drei DIVs nebeneinander. Das ganz ist in einem Rahmen gepackt.
Problemist ist, dass das DIV ganz rechts aus dem Rahmen fällt. Jemand eine Idee was es sein könnte. Ich bin auf dem Gebiet leider ein Greenhorn.
Ich habe noch ein Bild des Layouts angehängt, da seht Ihr was ich meine
Browser ist Firefox 3.6.22 für Mac. Und hier mal der Code:
- Code: Alles auswählen
<html>
<head>
<style type="text/css">
<!--
a:link { font: bold 18px/20px Verdana; color:#0099cc; text-decoration:none; }
a:hover { font: bold 18px/20px Verdana; color:#ffffff; text-decoration:underline; }
body
{
margin: 55 auto;
width: 1000;
}
#rahmen
{
height:715px;
width:1000px;
border:1px solid #000000;
}
#head
{
height:275px;
width:1000px;
border-bottom:0px;
background-color:#4c4c4c;
vertical-align:middle;
}
#navigation
{
height:32px;
width:980px;
background-color:#003366;
border-bottom:1px solid #ffffff;
padding-top:8px;
padding-left:20px;
}
#content-left
{
height:379px;
width:730px;
background-color:green;
float:left;
padding-top:20px;
padding-left:20px;
}
#linie
{
width:3px;
height:379px;
background-color:blue;
position:relative;
left:750px; top:10px;
}
#content-right
{
height:379px;
width:227px;
position:relative;
float:right;
background-color:red;
padding-top:20px;
padding-left:20px;
}
//-->
</style>
</head>
<body>
<div id="rahmen">
<div id="head">
</div>
<div id="navigation">
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
<a href="#">Link 4</a>
<a href="#">Link 5</a>
</div>
<div id="content-left">
Content1
</div>
<div id="linie">
</div>
<div id="content-right">
Content2
</div>
</div>
</body>
</html>
