Wenn in diese kleinen Ecken nur zur zierde sein sollen würde ich Hintergrundgrafiken verwenden.
Meißtens ergeben sich die nötigen Elemente schon aus dem Inhalt.
Nebeneinanderreihen brauchst du da nichts.
html:
Code:
<div id="inhalt">
<h1>Box flexibel</h1>
<div>
<p>Lorem Ipsum</p>
</div>
</div>
Die Ecken als Grafiken
css:
Code:
#inhalt,
#inhalt h1,
#inhalt div,
#inhalt p {
margin: 0;
padding: 0;
background-repeat: no-repeat;
}
#inhalt
{
background-image: url(images/ecke-ol.png);
background-position: 0 0;
background-color: #ccffac;
float: left;
}
#inhalt h1 {
background-image: url(images/ecke-or.png);
background-position: 100% 0;
padding: 40px 40px 0 40px;
}
#inhalt div {
background-image: url(images/ecke-ul.png);
background-position: 0 100%;
}
#inhalt div p {
background-image: url(images/ecke-ur.png);
background-position: 100% 100%;
padding: 0 0 40px 40px;
}
Die Grafiken sind in meinem Beispiel 40x40px;
Float verhindert, daß die Box die maximale Breite nutzt.
Die Ecken sollen eine fixe Breite haben. Die Box muß also mindestens so breit sein wie die linken und rechten Grafiken zusammen.
Daran würde eine Tabelle auch nichts ändern.
Auslachen solltest du hier Niemanden.
Ob eine Tabelle hier sinnvoll ist kommt auf den Inhalt an.
Den hast du uns nicht gezeigt.
