Hallo zusammen,
gleich noch ein Problem.
Ich möchte ein 3spaltiges Layout, bei dem die mittlere Spalte mit fester Breite in der Mitte steht und die beiden äußeren Spalten einen Farbverlauf zu den Rändern haben und sich flexibel an die jeweilige Seitenbreite anpassen.
Gedacht hatte ich das Ganze so:
HTML
Code
<div id="hg">
<div id="eins">
<p>1
</p>
</div>
<div id="zwei">
<p>2
</p>
</div>
<div id="drei">
<p>3
</p>
</div>
</div>CSS
CSS
#hg {
display: -moz-box;
display: -webkit-box;
display: -ms-box;
display: -o-box;
width: 100%;
}
#eins, #zwei, #drei {
width: 1000px;
height: 300px;
}
#eins {
-moz-box-flex: 1;
-webkit-box-flex: 1;
-ms-box-flex: 1;
-o-box-flex: 1;
background: -moz-linear-gradient(right, #7FAAFF 0%, #ffffff 100%);
background: -webkit-linear-gradient(right, #7FAAFF 0%, #fff 97%, #ffffff 100%);
background: -ms-linear-gradient(right, #7FAAFF 0%, #fff 97%, #ffffff 100%);
background: -o-linear-gradient(right, #7FAAFF 0%, #fff 97%, #ffffff 100%);
background: linear-gradient(right, #7FAAFF 0%, #fff 97%, #ffffff 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#FFFFFF, endColorstr=#7FAAFF,GradientType=1);
}
#zwei {
background: #7FAAFF ;
}
#drei {
-moz-box-flex: 1;
-webkit-box-flex: 1;
-ms-box-flex: 1;
-o-box-flex: 1;
background: -moz-linear-gradient(left, #7FAAFF 0%, #ffffff 100%);
background: -webkit-linear-gradient(left, #7FAAFF 0%, #fff 97%, #ffffff 100%);
background: -ms-linear-gradient(left, #7FAAFF 0%, #fff 97%, #ffffff 100%);
background: -o-linear-gradient(left, #7FAAFF 0%, #fff 97%, #ffffff 100%);
background: linear-gradient(left, #7FAAFF 0%, #fff 97%, #ffffff 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#7FAAFF, endColorstr=#ffffff,GradientType=1);
}Leider stapelt der IE die Spalten übereinander und nicht nebeneinander. Hat jemand eine Lösung?
Danke und noch einen schönen Sonntag - Wolfgang
Nur leider bringt mich die Antwort nicht weiter.