CSS Div-Box minimale mögliche Breite mit Berücksichtigung auf den Inhalt

[feuerfuchs]

Hi,
habe ein problem mit HTML/CSS.
Angenommen ich habe folgenden Code:

<div style='background-color:red;'>Hi</div>

dann füllt die Div-Box die gesamte Breite des Browserfensters.

Was muss man nun angeben, um der Div Box dier minimale Breite geben, allerdings soll der Inhalt nicht abgeschnitten werden.
Habe schon viel gegoogelt, bin jedoch leider nicht fündig geworden.
thx für eure Hilfe

 

[GermanyXS]

http://www.css4you.de/min-width.html

 

[feuerfuchs]

da war ich auch schon, aber weder mit min, noch mit maxwidht ändert sich etwas

 

[Crizzo]

Gibt der Box "float" ohne "width"und dann handelt sie nach "shrink to fit".

 

[PW-toXic]

und wenn du möchtest dass der darauffolgende Inhalt nicht neben dieser divbox erscheint, sondern darunter, dann einfach nach diesem div ein <div style="clear:both"></div> einfügen

 

[Crizzo]

Wie passt deine Info hier rein?
Außerdem muss man kein extra Element hinzufügen, man kann auch einfach dem nächsten Element "clear" geben, falls nötig.

 

[PW-toXic]

Das geht nur, wenn bereits ein Element vorhanden ist.

<div> textext
<div class="dynamische_breite_mit_float_left">...</div>
weiterer text, der aber nicht daneben steht.
</div>

-> du brauchst ein extra div element zum clearen

edit: Diese Info gehört hier sehr wohl hier rein, das er explizit gesagt hat, dass er nur ein element haben möchte, dessen breite (hintergrundfarbe!) dynamisch an den inhalt gebunden ist. Nirgendwo ist die Rede davon, dass er den Rest darum umher floaten lassen möchte.

 

[roker002]

hmm min-width ist ja so dass du minimum angibst. d.h. du kannst 0 angeben dann sollte es bis zu dem text die länge sein! einfach ausprobieren?

 

[feuerfuchs]

Ok, danke schonmal für eure Hilfe
geht dann auch noch, dass sich die Div Box in der Mitte der Bildschirmbreite befindet?
Es klappt weder so:

<div align='center' style='float:left;background-color:red;'>Hi</div>

noch so:

<div style='align:center;float:left;background-color:red;'>Hi</div>

noch so:

<div align='center'><div style='float:left;background-color:red;'>Hi</div></div>

 

[Crizzo]

Ist ja auch kein Wunder. "float" schiebt das Element soweit es geht nach links, da kannst du es nicht mehr zentrieren.
Du kannst das "float:left"-Element mit einem anderen Element umschließen und dieses dann mit Hilfe von "width" und "margin: 0 auto" zentrieren.

 

[feuerfuchs]

also so:

<div style='margin:0auto;width:100px;'><div style='float:left;background-color:red;'>Hi</div></div>

? klappt iergendwie nicht

 

[Crizzo]

Bitte ein Leerzeichen zwischen "0" und "auto" einfügen!

 

[feuerfuchs]

EDIT: Es sieht dann so aus, dass der linke Anfang der Div Box in der Mitte ist und nicht die Mitte der Div Box in der Mitte (s. Bild)
Code:

<div style='margin:0 auto;width:100px;'>
<div style='float:left;background-color:red'>
HiHiHIHIHIHIHIHIHIHIHIHIHIHIHIHIHIHIHIHIHIHIHIHIHIHI
</div>
</div>

ich hätte also gerne, dass das der Mittlere Buchstabe/Teil der Div-Box in der Mitte des Browserfensters ist

 

[Crizzo]

Was willst du denn genau mit dem inneren <div> anstellen, dass das <div> nur so groß wie der Text sein darf? Nur den Texthintergrund einfärben?

<div style="width:300px; margin: 0 auto; text-align:center;">
<span style="background-color:#FF0000; color:#000;">HiHiHIHIHIHIHIHIH IHIHIH IHIHIHIHIHIH IHIHIH IHIHI HIHIHI
</span>
</div>

Sowas vielleicht?

 

[feuerfuchs]

ja genau das! Danke