Drei-Spalten-Layout mit CSS

Status
Nicht offen für weitere Antworten.
M

Metha

Mitglied
Hallo zusammen,

baue mir gerade ein Drei-Spalten-Layout. Im IE funktioniert das Layout auch, doch im FireFox, Netscape und Opera noch nicht. Ich weiß aber nicht welche Angaben die anderen Browser noch benötige.

Hier mein Code (CSS):

PHP: 
.left{
	float: left;
	text-align: left;}
	
.right{
	float: right;
	text-align: right;}
	
.middle{
	text-align: center;}

.mb10{
	margin-bottom: 10px;}

/* Box 1 Anfang*/
	.body1head{
		margin: 0px 0px 0px 0px; width: 540px; height: 10px;
		background: url(../gfx/md_body1_head.gif) top no-repeat;}

	.body1cont{
		padding: 5px 15px 5px 15px; width: 510px;
		background: url(../gfx/md_body1_cont.gif) repeat-y; font-size: 10px;}

	.body1foot{
		margin: 0px 0px 0px 0px; width: 540px; height: 10px;
		background: url(../gfx/md_body1_foot.gif) top no-repeat;}
/* Box 1 Ende */

/* Box 3 Anfang*/
	.body3head{
		margin: 0px 0px 0px 0px; width: 170px; height: 10px;
		background: url(../gfx/md_body3_head.gif) top no-repeat;}

	.body3cont{
		padding: 5px 15px 5px 15px; width: 140px;
		background: url(../gfx/md_body3_cont.gif) repeat-y; font-size: 10px;}

	.body3foot{
		margin: 0px 0px 0px 0px; width: 170px; height: 10px;
		background: url(../gfx/md_body3_foot.gif) top no-repeat;}
/* Box 3 Ende */

Und hier mein HTML Code:
PHP: 
<div class="mb10">
	<div class="body1head"></div>
	<div class="body1cont">
	{top}
	  <div class="clear"></div></div>
	<div class="body1foot"></div>
</div>

<div class="left">
	<div class="body3head"></div>
	<div class="body3cont">
	{left}
	<div class="clear"></div></div>
	<div class="body3foot"></div>
</div>

<div class="right">
	<div class="body3head"></div>
	<div class="body3cont">
	{right}
	<div class="clear"></div></div>
	<div class="body3foot"></div>
</div>

<div class="middle">
	<div class="body3head"></div>
	<div class="body3cont">
	{middle}
	<div class="clear"></div></div>
	<div class="body3foot"></div>
</div>

Jemand eine Idee woran es leigt?
 
Die von dir genannten Browser benötigen für das DIV .middle die float-Eigenschaft (left oder right).

Und welchen Sinn soll das DIV .clear in den einzelnen Boxen haben?
 
Also kann ich so mein Layout garnicht dreispaltig machen ?

Das clear habe ich vergessen aufzuführen. Es ist "clear: both" damit die boxen auch auf den Content angepasst werden.
 
Wieso nicht? Es funktioniert doch, wenn du meinen Vorschlag übernimmst.

Du benötigst vermutlich noch ein übergeordnetes DIV .wrapper mit der Breitenangabe, die sich aus den drei Boxbreiten ergibt:

Code: 
.wrapper {
width: 510px; /* 3*170px = 510px */
border: 1px solid #000;
}
und bettest die Boxen dort ein:
Code: 
<div class="wrapper">
  <div class="left">
    <div class="body3head"></div>
    <div class="body3cont">
    {left}
    <div class="clear"></div></div>
    <div class="body3foot"></div>
  </div>

  <div class="right">
    <div class="body3head"></div>
    <div class="body3cont">
    {right}
    <div class="clear"></div></div>
    <div class="body3foot"></div>
  </div>

  <div class="middle">
    <div class="body3head"></div>
    <div class="body3cont">
    {middle} 
    <div class="clear"></div></div>
    <div class="body3foot"></div>
  </div>

  <div class="clear"></div>
</div>
 
Seltsam, denn bei mir funktioniert es in allen mir zur Verfügung stehenden Browsern einwandfrei.

Hast du das DIV .middle auch mit der float:left-Eigenschaft formatiert?
 
Ich hänge mal den kompletten Quelltext meiner Testseite zum Vergleichen an, vielleicht hast du ja etwas übersehen bzw. vergessen:

Code: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<title></title>

<style type="text/css">
<!--
.left{
    float: left;
    text-align: left;}

.right{
    float: right;
    text-align: right;}

.middle{
    float: left;
    text-align: center;}

.mb10{
    margin-bottom: 10px;}

.wrapper {
width: 510px;
border: 1px solid #000;
}

/* Box 1 Anfang*/
    .body1head{
        margin: 0px 0px 0px 0px; width: 540px; height: 10px;
        background: url(../gfx/md_body1_head.gif) top no-repeat;}

    .body1cont{
        padding: 5px 15px 5px 15px; width: 510px;
        background: url(../gfx/md_body1_cont.gif) repeat-y; font-size: 10px;}

    .body1foot{
        margin: 0px 0px 0px 0px; width: 540px; height: 10px;
        background: url(../gfx/md_body1_foot.gif) top no-repeat;}
/* Box 1 Ende */

/* Box 3 Anfang*/
    .body3head{
        margin: 0px 0px 0px 0px; width: 170px; height: 10px;
        background: url(../gfx/md_body3_head.gif) top no-repeat;}

    .body3cont{
        padding: 5px 15px 5px 15px; width: 140px;
        background: url(../gfx/md_body3_cont.gif) repeat-y; font-size: 10px;}

    .body3foot{
        margin: 0px 0px 0px 0px; width: 170px; height: 10px;
        background: url(../gfx/md_body3_foot.gif) top no-repeat;}
/* Box 3 Ende */

div.clear {
clear: both;
}
-->
</style>

</head>
<body>

<div class="mb10">
    <div class="body1head"></div>
    <div class="body1cont">
    {top}
      <div class="clear"></div></div>
    <div class="body1foot"></div>
</div>

<div class="wrapper">
  <div class="left">
    <div class="body3head"></div>
    <div class="body3cont">
    {left}
    <div class="clear"></div></div>
    <div class="body3foot"></div>
  </div>

  <div class="right">
    <div class="body3head"></div>
    <div class="body3cont">
    {right}
    <div class="clear"></div></div>
    <div class="body3foot"></div>
  </div>

  <div class="middle">
    <div class="body3head"></div>
    <div class="body3cont">
    {middle}
    <div class="clear"></div></div>
    <div class="body3foot"></div>
  </div>

  <div class="clear"></div>
</div>

</body>
</html>
  • Browsercheck: Firefox 1.5.0.4, IE 6.0, Mozilla 1.7.12, Netscape 7.0, Opera 8.50 | Win2000
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück