Moin,
ich möchte einen/mehrer Artikel/Absätze teilen und nebeneinander Darstellen (= Zeitungsstil). Mit Float ginge es wohl auch, aber ich möchte einen neuen Weg gehen und die Blöcke nebeneinander, inhaltsabhängig und mit gleicher Höhe haben.
Ergo liegt eine Tabelle nahe. Um aber die Sematik (im Markup) nicht zu stören habe ich mir folgende "moderne" Lösung ausgedacht. Diese würde wahrscheinlich auch Cross-Browser funktionieren, halt nicht in jedem Browser nebeneinander. Was ja nicht so schlimm ist.
Diesen Code würde ich gerne mal diskutieren bzw. hätte gerne von Euch einen
Cross-Browser Test, DANKE.
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>xxxx</title>
<style type="text/css" media="screen,projection" title="Druckvorschau -> Semantic-Test">
/*<![CDATA[*/
* {
margin: 0;
padding: 0;
/* Tabellen
*/
border-collapse:collapse;
border-spacing: 0;
}
html {
/* permanent Scrollbalken
* Gecko => nicht Valide
*/
overflow: -moz-scrollbars-vertical;
}
html,
body {
color: #000000;
background: #FFDD22;
/* line-height ohne Einheit - sonst Vererbung
*/
line-height: 1.45;
}
body {
padding: 5px 0;
/* Nur hier, sonst gibt es
* eventuell Vererbungsprobleme.
*/
font-size: 100.01%;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
}
div {
display: table;
width: 80%;
margin: 0 auto;
background-color: #FFFFFF;
}
p {
display:table-row;
background-color: #FF0000;
font-size: .8em;
}
span {
display: block;
border: 1px solid #000000;
padding: 1em;
background-color: #2299FF;
}
head:first-child+body div p span
{
/*
* In der Annahme:
* Browser die diesen Selector
* lesen - koennen [display: table-cell;]
*
* Selector (gute Browser)
* Gecko / Opera 7.xx
* + alle die es lernen
*/
display: table-cell;
}
/*]]>*/
</style>
</head>
<body>
<div>
<span>cell 1
.
.
.
.
.
.
.</span>
<span>cell 2</span>
</p>
<span>cell 3</span>
<span>cell 4
.
.
.
.</span>
</p>
</div>
</body>
</html>
Ach noch was, an den vielen Hintergrundfarben nicht stören lassen, die sind nur zur Kontrolle.