nicht angemeldet
Breite eines div
Hallo Leute,
ich habe ein Problem mit folgenden Fragment:
<html>
<body>
<div style="border:1px red solid;color:red">
aussen
<div style="border:1px blue solid;width:3000px;color:blue;">
innen
</div>
</div>
</body>
</html>
Wenn ich mir das im aktuellen Firefox anschaue, sehe ich den roten Rahmen, also das äussere div am Fensterrand abgeschnitten. Das innere div (blau) mit der grossen Breite überschreitet dabei den Rahmen des roten div am rechten Rand. Das verstehe ich nicht. Normalerweise richtet sich doch die Breite eines Elements nach der Breite seiner enthaltenen Elemente? Demnach sollte doch das rote genauso breit sein, wie das blaue div.
Oder bin ich auf dem Holzweg?
Danke.
-
Hallo digedag,
Normalerweise richtet sich doch die Breite eines Elements nach der Breite seiner enthaltenen Elemente?
Nein, das ist bei normalen Blockelementen nicht so*. Die Höhe richtet sich allerdings nach den enthaltenen Elementen.
*)Bei floats und bei display:inline oder display:inline-block hast du u. U. Recht.
Jonathan
-
Hallo digedag,
Normalerweise richtet sich doch die Breite eines Elements nach der Breite seiner enthaltenen Elemente?
Nein, das ist bei normalen Blockelementen nicht so*. Die Höhe richtet sich allerdings nach den enthaltenen Elementen.
*)Bei floats und bei display:inline oder display:inline-block hast du u. U. Recht.
Jonathan
Danke, für die Antwort. Dann möchte ich mein eigentliches Problem als Frage stellen:
Wie mache ich ein div, welches so breit ist wie das breiteste darin enthaltene Element.
Ich habe übrigens in meinem Beispiel das äussere div mal zum float gemacht, das scheint zu gehen. Ist das eine standardkonforme Lösung oder gibt es eine andere, bessere?-
Hallo digedag,
Ich habe übrigens in meinem Beispiel das äussere div mal zum float gemacht, das scheint zu gehen. Ist das eine standardkonforme Lösung oder gibt es eine andere, bessere?
Nein, das ist eine vernünftige Standardkonforme Lösung. Natürlich musst du dann mit den nebeneffekten des Floats leben.
Eine andere Lösung wäre ein "display:inline-block", aber das unterstützt kaum ein Browser. Evtl. gehts auch über position:absolute oder position:relative, aber davon würde ich eher abraten. Mit float ist es schon in Ordnung.
Jonathan
-
-