Einzelnen Beitrag anzeigen
  #1 (permalink)  
Alt 22.12.2011, 13:00
chuha chuha ist offline
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 22.12.2011
Beiträge: 1
chuha befindet sich auf einem aufstrebenden Ast
Standard 3 Spaltiges Layout mit CSS - Fluid Fixed Fluid

Hallo ihr Lieben,
ich bin gerade am verzweifeln, weil ich schon seit mehreren Tagen versuche, ein Layout mit CSS zu zaubern.
Egal was ich versuche, es klappt einfach nicht. Über Google bin ich schon auf viel Denkanstöße und Beispielen gestoßen, jedoch hat keins so funktioniert, wie es soll :/
Vielleicht könnt ihr mir da weiterhelfen oder einen entsprechenden Tipp geben.

Das Layout sollte wie folgt aufgebaut sein.



Wie im Bild zu sehen, gibt es 3 Spalten. Die mittlere Spalte ist zentriert auf eine bestimmte Größe fixiert (z.b.1000px)
Die linke und rechte Spalte sind jeweils variabel und passen sich an das Fenster an und verschwinden ggf. bei kleinerem Fenster.
Alle Spalten sollen auf 100% Höhe gesetzt werden. Grund dafür ist, dass ich Top:0 sowie Bottom:0 Objekte setzen möchte.
Ganz wichtig ist auch, dass die linke Spalte sich rechts an der mittleren Spalte orientiert (rechtsbündig soll dann ein Background gesetzt werden, nahtlos an der mittleren Spalte).

Mein Codebeispiel, welches ich hier euch zeige, ist schon ziemlich nah dran.
Jedoch, wenn ich das Fenster in der Breite kleiner mache, als die mittlere Spalte groß ist, ist im FF der Text der rechten Spalte nicht mehr linksbündig sondern rechtsbündig. Im IE ist sind in diesem Fall die linke und die rechte Spalte einfach unter der mittleren Spalte gerutscht.

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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Three Column Layout</title>
 
<style type="text/css">
html,body{
    height:100%;
    background:#BBB;
}
body {
	margin: 0px;
	padding: 0px; 
	text-align: center;
}
 
#wrapper {
	width: 100%;
	height: 100%; 
}                
#maincol {
	width: 1000px;
	margin: 0 auto;
	text-align: left;
	background: #888;
	min-height: 100%;
  position:relative;
  float:left;
}
#left {
  width:50%;
  float: left;
  min-height:100%;
  margin-right:-500px;    
  background: #fff;
}
#right {
  width: 50%;
  float: right;
  min-height:100%;
  margin-left:-501px; 
  background: #aaa;
  text-align:left;
} 
</style>
</head>
 
<body>
 
<div id="wrapper">
  	<div id="left">
      <div style="text-align:right;margin-right:500px;">2</div>
    </div>
  	<div id="maincol">123</div>
  	<div id="right">
      <div style="text-align:left;margin-left:500px;">2</div>
    </div>
  </div>
</div>

</body>
</html>
Ich hoffe ihr seid vielleicht schlauer als ich

LG
Daniel
Mit Zitat antworten
Sponsored Links