Zecke: Alternative display:table

Beitrag lesen

Hallo Gunther,

Eigentlich ist die Frage damit schon beantwortet, und könnte höchstens noch durch eine Lösung verbessert werden, die auch Opera 11.64 einbezieht, den ich immer noch als Hauptbrowser verwende.

Es muss nur in FF und Webkit laufen.

???

Es ist ein User-Stylesheet, das aber bei mehreren Leuten laufen soll.

Demo

Gute Idee! Leider sind in dem Wrapper ober- und unterhalb der beide Spalten noch andere Elemente, die über die gesamte Breite angezeigt werden sollen. Die kriegt man zwar mit "display:table-row" aus der Anordnung nebeneinander wieder raus, doch habe ich es noch nicht hinbekommen, sie über die gesamte Breite anzeigen zu lassen. Sie sind immer nur so breit wie die erste der beiden Spalten, es fehlt sowas wie colspan in CSS.

  
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">  
<html>  
<head>  
<title>test</title>  
  
<style type="text/css">  
  
html, body {  
    width: 100%;  
    margin: 0;  
    padding: 0;  
}  
#wrapper {  
    display: table;  
    width: 100%;  
}  
div[id^="cell"] {  
    display: table-cell;  
}  
#cell_1 {  
    background-color: #FCC;  
}  
#cell_2 {  
    width: 300px;  
    background-color: #CCF;  
}  
#header, #footer {  
    display: table-row;  
    width: 100%;  
    background-color: #CFC;  
}  
  
</style>  
  
</head>  
<body>  
  
<div id="wrapper">  
  
    <div id="header">  
        <p>Text über die gesamte Breite</p>  
    </div>  
  
    <div id="cell_1">  
        <p>Text in Spalte 1</p>  
    </div>  
  
    <div id="cell_2">  
        <p>Text in Spalte 2</p>  
    </div>  
  
    <div id="footer">  
        <p>Text über die gesamte Breite</p>  
    </div>  
  
</div>  
  
</body>  
</html>  

Gruß
Zecke