nicht angemeldet
Hallo liebe Leute,
kann mir jemand sagen, warum meine drei Spalten nicht in eine Reihe passen? Die erste ist 500 px breit, die zweite (scroller) 150 und die dritte 200. Macht zusammen 850, was im Rahmen (all) angegeben ist. Aber der Scroller rutscht immer unter die äußeren. Erst wenn ich dem Rahmen 6 Pixel dazugebe (also auf 856), dann rutscht der scroller an die richtige Stelle (aber dann hat er dusselige 3 Pixel Abstand zu beiden Seiten 8-(( ). Was läuft hier falsch?
Gruß von Reiner
CSS:
body {
color: black; background-color: white;
margin: 0; padding: 0;
text-align: center; /* Zentrierung im Internet Explorer */
font-size: 100.01%;
font-family: Arial, Helvetica, sans-serif;
voice-family: ""}"";
voice-family: inherit;
}
td {
font-family: Arial, Helvetica, sans-serif;
}
th {
font-family: Arial, Helvetica, sans-serif;
}
h1, h2, h3, h4, h5, h6, h7 {
font-family: "Courier New", Courier, monospace;
font-weight: bolder;
letter-spacing: 1em;
}
#all {
width: 850px;
}
#scroller {
background-color: #FFFF00;
width: 150px;
height: 100%;
margin-left: 500px;
margin-right: 200px;
}
#main1 {
float: left;
width: 500px;
margin-top: 50px;
text-align: left;
}
#title1 {
background-color: #33FF00;
}
#main2 {
float: right;
width: 200px;
margin-top: 50px;
text-align: left;
}
#title2 {
background-color: #33FF00;
}
#col1 {
background-color: #00FFFF;
}
#col2 {
background-color: #0099FF;
}
HTML:
<!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>SilberSteine</title>
<link rel="stylesheet" href="style.css" type="text/css" />
</head>
<body>
<div id="all">
<div id="main1">
<div id="title1">
<h3>Überschrift</h3>
Test </div>
<!-- Linke Spalte -->
<div id="col1"> ... </div>
</div>
<div id="main2">
<div id="title1">
<h3>Über</h3>
Test </div>
<!-- Rechte Spalte -->
<div id="col2"> ... </div>
</div>
<div id="scroller"> scroller <br />
scroller <br />
scroller <br />
scroller <br />
scroller <br />
scroller <br />
scroller <br />
scroller <br />
scroller <br />
scroller <br />
scroller <br />
scroller <br />
scroller <br />
scroller <br />
</div>
<!-- IE Column Clearing >
<div id="ie_clearing"> </div-->
</div>
</body>
</html>