Ich habe mich dran gewagt einen Online Shop von seinem 960grid Outfit zu befreien und die Gestaltung mit css selbst zu übernehmen. Das funktioniert so weit ganz gut, aber jetzt hänge ich an einem "schwerwiegenden" Problem.
Nach heraus filtern des php-Codes ergibt sich folgende div Konstellation:
<body>
<div id="header"></div>
<div id="content"></div>
<div id="column_left"></div>
<div id="column_right"></div>
<div id="footer"></div>
</body>
Ursprünglich war der Shop, wie die div Bezeichnungen schon vermuten lassen, so aufgebaut: header(oben), column_left(links), content(mitte), column_right(rechts), footer(unten),
dadurch daß der content im html Dokument direkt nach dem header kommt, ist es mir nicht möglich die ursprüngliche Konstellation wiederherzustellen. Ich floate, span'e und tue. aber es klappt nicht.
Da sich der content über 2 php Dateien erstreckt, ist es auch nicht möglich den content zwischen die zwei column div's zu stecken. Das hab ich probiert, dann hat aber der ganze Shop nicht mehr funktioniert.
Das müßte doch irgendwie über css zu regeln sein? Gruß Ralph
P.S. Mit absoluter Positionierung klappt das natürlich wunderbar, ich wollte es aber dynamisch flexibel halten!
Zum Spielen hab ich mal angelegt:
<!DOCTYPE html>
<html>
<head>
<title>Content in die Mitte floaten</title>
<meta charset="UTF-8">
<style type="text/css" rel="stylesheet">
#wrapper
{
width: 900px;
height: 200px;
background-color: #cccccc;
}
#left
{
width: 300px;
height: 200px;
background-color: #FF0000;
float: left;
}
#content
{
width: 300px;
height: 200px;
background-color: #000000;
float: left;
color: #FFF;
}
#right
{
width: 300px;
height: 200px;
background-color: #FFFF00;
float: right;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="content">Content Mitte</div>
<div id="left">Column Left</div>
<div id="right">Column Right</div>
</div>
</body>
</html>