✔ 3-Spalten-Layout mit 2-Spalten ContentArea

Status
Nicht offen für weitere Antworten.
WebGeek

WebGeek

Grünschnabel
Hallo Community,

ich hab ein 3-Spalten-Layout (=das Thema der Woche... ;) )
die mittlere Spalte sollte zentriert sein, deshalb auch bei der mittleren Spalte das align=center...
das 'align=center' zentriert nun aber alle in diesem div-tag liegenden div-tags, was aber so nicht gewünscht ist...

in der ContentArea habe ich ein 2-Spalten-Layout, welches mit FF2 die beiden Spalten richtig in einer Zeile positioniert...
ABER im IE7 wird die rechte Spalte - wie soll's anders sein - eine Zeile unterhalb platziert... :rolleyes:
display: inline; bzw. display: block; hilft da auch nicht!

hätte jemand nicht eine funktionierende Lösung dafür!
:-)
Code: 
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>3-Spalten-Layout mit 2-Spalten ContentArea</title>
<style type="text/css">
<!--
body { background-color: #666666; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10px; line-height: 15px; color: #FFFFFF; margin: 0px; }
#ColL{ float: left; width: 50px; border: 1px dashed #999999; }
#ColR{ float: right; width: 50px; border: 1px dashed #999999; }
#ColM{ margin: 0 50px; border: 1px dashed #FFFF00; }
#ContentArea { width: 810px; border: 1px dashed #DDDDDD; }
#ContentAreaTop { height: 24px; border: 1px dashed #FF00CC; }
#ContentAreaTopNav { line-height: 20px; border: 2px dashed #009900; }
#ContentAreaMain { border: 1px dashed #FF0000; }
#ContentAreaMainL{ float: left; margin: 0px 0px 0px 50px; width: 365px; padding-left: 0px; border: 1px dashed #6495ED;}
#ContentAreaMainR{ margin: 0px 0px 0px 467px; width: 343px; padding-left: 0px; border: 1px dashed #6495ED; }
#ContentAreaBottom { height: 51px; border: 1px dashed #FF00FF; }
-->
</style>
</head>
<body>
<div id="ColL"></div>
<div id="ColR"></div>
<div id="ColM" align="center">
  <div id="ContentArea">
    <div id="ContentAreaTop"></div>
    <div id="ContentAreaTopNav">Navigation</div>
    <div id="ContentAreaMain">
      <div id="ContentAreaMainL">Content Left</div>
      <div id="ContentAreaMainR">Content Right</div>
    </div>
    <div id="ContentAreaBottom"></div>
  </div>
</div>
</body>
</html>
 
Hi,

das DIV ContentArea lässt sich mit diesen Regelerweiterungen im DIV ColM horizontal zentrieren, und macht das HTML-Attribut align=center überflüssig:

Code: 
#ColM{ margin: 0 50px; border: 1px dashed #FFFF00; text-align:center;  }
#ContentArea { position:relative; margin:0 auto; text-align:left; width: 810px; border: 1px dashed #DDDDDD; }

Das Darstellungsproblem im IE liesse sich folgendermaßen lösen:

Code: 
#ContentAreaMainL{ float: left; margin: 0px 0px 0px 50px !important; margin: 0px 0px 0px 25px; width: 365px; padding-left: 0px; border: 1px dashed #6495ED;}
#ContentAreaMainR{ float:right; width: 343px; padding-left: 0px; border: 1px dashed #6495ED; }
#ContentAreaBottom { clear:both; height: 51px; border: 1px dashed #FF00FF; }
 
DANKE für die Optimierung ;)

ich hab's gleich nach Deinem posting mal ausprobiert - hat soweit im IE7 und FF2gleichermaßen funktioniert...

was mir derzeit noch nicht ganz klar ist, warum 2 x margin vorkommt und was dies genau bewirkt!
Code: 
margin: 0px 0px 0px 50px !important; margin: 0px 0px 0px 25px;
und was clear bewirkt...
Code: 
clear:both;
könntest Du dies bitte kurz erläutern, das wäre echt fein - DANKE :)
 
Hi,

mit Hilfe der !important-Regel
Code: 
margin: 0px 0px 0px 50px !important; margin: 0px 0px 0px 25px;
wird im IE der "Double-Margin-Bug" behoben.

Da nun die rechte Spalte ContentAreaMainR mit float:right ausgezeichnet ist, muss das nachfolgende DIV ContentAreaBottom die clear-Eigenschaft erhalten, damit es nicht zwischen die beiden Spalten ContentAreaMainL und ContentAreaMainR rutscht und diese umfließt.
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück