Darren: positionierungs problem

Beitrag lesen

SELF-Forum

positionierungs problem

Darren
– Informationen zu den Bewertungsregeln

Folgendes:

Ich arbeite mit ein CMS namens Typo3.
Ich versuche ein template mittels css zu erstellen.

Er soll so aussehen:
ein container der alles zentriert hält
header in der gesamtlänge des containers
3 spalten neben einander
1 footer  in der gesamtbreite des containers

Das problem:
der footer bereich springt beim FireFox immer zum ende der mittleren spalte. Normalerweise ist die 3 spalte (rechts) viel länger und der footer müsste dadrunter kommen.

Hier mein body tempalte:
<html>

<head>
<title>Template</title>
</head>

<body>

###TEMPDOK###
<div id="container">

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

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

<div id="content">
###CONTENT_NORMAL###
  </div>

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

<div id="copyright">
<p>@Copyright </p>
</div>

###TEMPDOK###
</div>

</body>

</html>

Hier meine css:
body {
  text-align:center;
                background-color: #99CCFF;
                font-size: 11px;
                padding:0px;
                margin:0px;
background-image: url(bbb.gif);
  }

#container {
  width:800px;
                height: 100%;
                border: solid;
                Border-left-width: 5px;
                border-color: #ffffff;
                margin-top:20px;
                margin-bottom: 20px;
  margin-right:auto;
  margin-left:auto;

padding:0px;
                background-color: #ffffff;
  text-align:left;
  }

#left {
  width:175px;
  padding:0px;
  float:left;
  background:#F8F7EF;
  }

#content {
  width:430px;
  padding:0px;
  float:left;
  background:#eee;
  }

div#content {
min-height: 300px;
height:expression(this.scrollHeight > 300 ? "auto":"300px");
text-align:left;
}

#right {
  width: 175px;
  padding: 0px;
  float: right;
  background: #F8F7EF;
                margin: 0px;
margin-right:auto;
  margin-left:auto;
  }

#header {
                padding: 0px;
                margin: 0px;
                background-image: url(bb.jpg);
                height: 200px;
                background-color:#ffffff;
  }

p,h1,pre {
  margin:0px 10px 10px 10px;
  }

h1 {
  font-size:14px;
  padding-top:10px;
  }

#header h1 {
  font-size:14px;
  padding:10px;
  margin:0px;
  }

#right p { font-size:10px}
}
#copyright {
clear: both;
position: absolute;
height: 50px;
width: 100%;
background-color: rgb(255,255,243);
color: #666666;
text-align: center;
}

Beitrag melden
–
Informationen zu den Bewertungsregeln