Weihnachtsbert: <div> mit automatischer Breite

Beitrag lesen

Hallo,

ich habe ein Problem mit HTML/CSS. Es besteht folgende Gestaltungsvorgabe:

|     [ zentrierte tabelle mit variabler Breite ]     |
|     [ aufgrund unterschiedlicher Inhalte      ]     |
|     [ (dynamisch durch PHP)                   ]     |
|                                                     |
|     < Umrahmte Box mit der selben Breite      >     |
|     < Die Inhalte sind schmäler               >     |

Der Ansatz sieht in HTML wie folgt aus:

<div style="margin-left: auto; margin-right: auto; width: auto">
 <table style="border: 1px solid black">
 [...]
 </table>
 <div style="width: 100%; border: 1px solid black">
 [...]
 </div>
</div>

Dabei füllt das umrahmende <div> jedoch immer die gesamte Browserfenster-Breite aus (width: 100%), statt nur die Tabelle zu umgeben. Die Folge ist, dass das innere <div> auch die gesamte Breite ausfüllt. Ziel ist aber, dass die Tabelle und die <div>-Box darunter die selbe Breite haben und zentriert sind.

"width: auto" ist anscheindend nicht der richtige Weg.

Besteht die Möglichkeit, mit CSS ein <div> so zu formatieren, dass sich seine Breite automatisch an die Breite seiner Inhalte anpasst?