✔ Firefox: Content größer als Container

Status
Nicht offen für weitere Antworten.
A

antichecker

Mitglied
Gutan Tach,

in einem Container befinden sich drei Spaltern, sobald ich einen großen Text in eine Spalte (z.B. den Content) reinschreibe wird nur diese größer, nicht aber die anderen zwei.
Zum besseren Verständnis könnt ihr euch den Screen anschauen.

Dazu folgender Code:
Code: 
body {
  margin:0px;
  padding:0px;
  text-align:center;
  background-color:#ff0000;
}
#container {
  width:760px;
  height:100%;
  margin:0px auto;
  padding:0px;
  text-align:left;
  background-color:#ffffff;
}
#left {
  float:left;
  width:170px;
  height:100%;
  
  padding:0px;
  text-align:left;
  background-image: url(bg_left.gif);
}
#content {
  float:left;
  width:470px;
  padding:0px;
  text-align:justify;
  background-color:#ffffff;
  background-image: url(bg_header.gif);
  background-repeat: no-repeat;
  background-position: top;
}

#right {
  float:right;
  width:120px;
  height:100%;
  padding:0px;
  background-image: url(bg_right.gif);
  
}
 

Anhänge

  • Unbenannt.jpg
    Unbenannt.jpg
    141,9 KB · Aufrufe: 32
Füge am Ende des DIV#container folgendes DIV ein:

CSS: 
div.clear
{
clear: left;
height: 0;
font-size: 0;
margin: 0;
padding: 0;
}
HTML: 
<div id="container">
     <div id="left">left</div>
     <div id="content">
          <p>content</p>
          <p>content</p>
          <p>content</p>
     </div>
     <div id="right">right</div>

     <div class="clear">&nbsp;</div>
</div>
 
Stimmt "clear" hatte ich vergessen.
Funktioniert aber trotzdem nicht. Hab ich was übersehen?


Code: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Unbenanntes Dokument</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<style type="text/css">

body {
  margin:0px;
  padding:0px;
  text-align:center;
  background-color:#ff0000;
}

#container 
{
  width:760px;
  height:100%;
  margin:0px auto;
  padding:0px;
  text-align:left;
  background-color:#ffffff;
}

div.clear
{
  clear: left;
  height: 0;
  font-size: 0;
  margin: 0;
  padding: 0;
} 

#left 
{
  float:left;
  width:170px;
  height:100%;  
  padding:0px;
  text-align:left;
  background-image: url(bg_left.gif);
}

#content 
{
  float:left;
  width:470px;
  padding:0px;
  text-align:justify;
  background-color:#ffffff;
  background-image: url(bg_header.gif);
  background-repeat: no-repeat;
  background-position: top;
}

#right 
{
  float:right;
  width:120px;
  height:100%;
  padding:0px;
  background-image: url(bg_right.gif);  
}

</style>

</head>

<body>

<div id="container">
     <div id="left">left</div>
     <div id="content">
          <p>content</p>
          <p>content</p>
          <p>content</p>
		  
		  ...
     </div>
     <div id="right">right</div>

     <div class="clear">&nbsp;</div>
</div>

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

Neue Beiträge

Zurück