Positionieren mit CSS

**Alexander**

Hallo,
ich bin gerade dabei eine Website ohne Tabellen, dafür aber mit Div's aufzubauen. Klappt so weit auch schon ganz gut, nur zerpflückt der FireFox mir die Seite etwas. Soll heißen, dass links und rechts sowie oben und unten ein kleiner weißer Rand zwischen dem mittleren und dem äußeren Div bleibt. Im Internet Explorer rutscht das mitlere Div sogar ganz nach unten.
Ich hänge beide Fehler mal als Screenshot an. Dann sollte man das Problem erkennen können.

Wie kann ich den Fehler beheben?

Das CSS:

markieren

Code:

			* {

   text-align: left;

   border: none;

   font-family: Verdana, Helvetica, Sans-Serif;

}

div#container {

   margin: auto;

   width: 640px;

   height: 437px;

   padding : 0px;

}

div#header {

   background-image: url(../images/header.jpg);

   background-repeat: no-repeat;   

   width:640;

   height: 83px;   

}

div#navBar {

   background-image: url(../images/nav.jpg);

   background-repeat: repeat-x;   

   width:640;

   height: 27px;

}

div#left {

   background-image: url(../images/left.jpg);

   background-repeat: no-repeat;   

   float: left;   

   width: 7px;

   height:306px;

}

div#content {

   background-image: url(../images/contentbg.jpg);

   background-repeat: repeat-x;   

   width:640px;

   height: 306px;

   color: #71737A;

   font-size:10pt;

   text-align: justify;

   /* overflow:auto;*/ 

}

div#right {

   background-image: url(../images/right.jpg);

   background-repeat: no-repeat;   

   float:right;

   width: 8px;

   height:306px;

}

div#footer {

   background-image: url(../images/footer.jpg);

   background-repeat: no-repeat;   

   width: 640px;

   height: 22px

}

h1 {

   color: #213D96;

   font-size: 12pt;

   letter-spacing: 0.1em;

     list-style-image:url(../images/dot.gif);   

}

Die HTML-Seite

markieren

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" lang="de" xml:lang="de">

  <head>

    <style type="text/css" media="all">@import "style/main.css";</style>

  </head>

  <body>

    <div id="container">

      <div id="header"></div>

      <div id="navBar"></div>

      <div id="left"></div>

      <div id="right"></div>

      <div id="content">

        <h1>Herzlich willkommen!</h1>

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laore

et dolore magna aliquam erat volutpat.

Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea

commodo consequat.

Sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat, duis autem vel

eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla

facilisis at vero et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis

dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy

nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis

nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

     </div>

      <div id="footer"></div>

    </div>

  </body>

</html>

An den Spaces in den Div's ("") liegt es auch nicht. Wäre toll, wenn ihr einen Ansatz habt!

Vielen Dank für eure Antworten.
Alexander

Positionieren mit CSS

Positionieren mit CSS

Forumregeln