✔ Css Layout verschiebung

Status
Nicht offen für weitere Antworten.
A

alex130

Erfahrenes Mitglied
Hi
Ich habe ein Problem und zwar wollte ich gerade ein ziemlich simples CSS Layout erstellen, doch es verschiebt sich andauernd. Ich hoffe ihr könnt mir helfen, hier der Code:
Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Unbenanntes Dokument</title>

<style type="text/css">

body {
margin: 0;
background-color: #000000;
}

#container {
width: 800px;
margin: 0 auto;
}

#header {
width: 800px;
height: 130px;
background-color: #0033CC;
margin: 0px;
}

#content {
width: 500px;
height: 450px;
margin: 0px;
background-color: #FFFFFF;
}

.box {
width: 150px;
height: 450px;
background-color: #0066FF;
}



.left {
width: 150px;
float: left;
margin: 0;
}

.right {
width: 150px;
float: right;
margin: 0;
}


#footer {
width: 800px;
height: 20px;
background-color: #0033CC;
}
</style>
</head>

<body>

<div id="container">
<div id="header"></div>
<div class="left"><div class="box"></div></div>
<div id="content"></div>
<div class="right"><div class="box"></div></div>
<div id="footer"></div>
</div>


</body>
</html>
 
Hier der korrigierte CSS- und HTML-Code:

Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Unbenanntes Dokument</title>

<style type="text/css">
body {
margin: 0;
background-color: #000000;
}

#container {
width: 800px;
margin: 0 auto;
}

#header {
width: 800px;
height: 130px;
background-color: #0033CC;
margin: 0px;
}

#content {
height: 450px;
margin: 0px 150px !important; /* Für moderne Browser */
margin: 0px 147px; /* Für IE */
background-color: #FFFFFF;
}

.box {
width: 150px;
height: 450px;
background-color: #0066FF;
}

.left {
width: 150px;
float: left;
margin-right: 0 !important; /* Für moderne Browser */
margin-right: -3px; /* Für IE */
}

.right {
width: 150px;
float: right;
margin-left: 0 !important; /* Für moderne Browser */
margin-left: -3px; /* Für IE */
}

#footer {
width: 800px;
height: 20px;
background-color: #0033CC;
}
</style>

</head>
<body>

<div id="container">
     <div id="header"></div>
     <div class="left"><div class="box"></div></div>
     <div class="right"><div class="box"></div></div>
     <div id="content"></div>
     <div id="footer"></div>
</div>

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

Neue Beiträge

Zurück