äussere Box nach innerer

[xJonx]

Hi,

ich hab folgendes Problem: Ich will das die äusserer Box nicht kleiner wird als der Inhalt der inneren ... Ich meine das dass normaler kein Ding ist - aber irgendwie
scheint das nicht der Fall zu sein.

Hier einmal ein einfaches Beispiel:

<style type="text/css" media="screen">
    .no1 {
        width:auto;
        padding:20px;
        background:red;
    }
    .no2 {
        width:400px;
        padding:20px;
        background:green;
    }
</style>
<div class="no1">
    <div class="no2">
        <!-- -->
    </div>
</div> 

Kann mir da eventl. jmd helfen? Ich verzweifel da gerade dran.

Grüße,
Jon

[Kropff]

also der obige code funktioniert doch genau so, wie gewünscht. ein paar mehr infos wären da schon hilfreich.

gruß
peter

[xJonx]

hey,

also, naja ... ich hab das Problem halt, das wenn ich den Browser kleiner ziehe.
Das sich dann der Inhalt der Inneren Box über den Rand der Äusseren geht.
Und dementsprechend auch erst dann Scrollbalken einsetzen, wenn der Rahmen der Inneren vom Browser berührt werden.

Vielleicht ist das auch die Info, die man zusätzlich braucht

Ich meine wirklich das Verhalten beim verändern der Browsergröße.

Danke,
Jon

[Kropff]

arbeite mit relativen breitenangaben.

peter

[xJonx]

ja, aber wie soll ich das da anwende?
Weil die Box soll ja exakt die breite haben, wie es der Inhalt vorgibt.

Hin zu kommt, das ich jetzt in der Box floatende Elemente habe,
die wenn der Rahmen breit genug ist nebeneinander und sonst untereinander
sein soll ... in dem Beispiel läuft das auch. Nur wie wenn ich den Browser klein
ziehe, wieder mein Problem.

Daher hier noch nen Beispiel mit beiden Boxen:

<style type="text/css" media="screen">
    .no1 {
        width:auto;
        padding:20px;
        background:red;
    }
    .no2 {
        width:400px;
        padding:20px;
        background:green;
        float:left;
    }
    .no3 {
        width:400px;
        padding:20px;
        background:grey;
        float:left;
    }
    .cleaner {
        clear: both;
    }
</style>
<div class="no1">
    <div class="no2">
        <!-- -->
    </div>
    <div class="no3">
        <!-- -->
    </div>
    <div class="cleaner"><!-- --></div>
</div> 

[Kropff]

viellicht solltest du dich mal mit liquid columns beschäftigen. schau dir mal meinen auftritt an. der wurde damit umgesetzt. vielleicht hilft dir auch das hier weiter.

peter

[xJonx]

ja, aber du hast "mein problem" quasi ja auch.
zB bei den Codequotes ... da wird, wenn man den
Browser klein zieht, auch die Box aussen kleiner
als Innen ...




und hier ein beispiel von mir

[Kropff]

zB bei den Codequotes

das liegt aber nur daran, dass ich dort mit <pre> arbeite, und da gibt es keinen automatischen zeilenumbruch.

peter

[xJonx]

ja, aber genau das verdeutlich ja mein Problem.
Mir ging es nicht darum, das es wegen dem <pre>
keinen Umbruch gibt. Sondern wirklich um das
Beispiel, das da der Inhalt über die äussere Box geht.
Und nicht, was bei dir sicher keinen Sinn macht, die
Box einfach nicht kleiner wird als sie soll.

Grüße,
Jon

[Kropff]

und hier ein beispiel von mir

kann man das mal online sehen?

peter

[xJonx]

klar, hier: http://loxiran.net/dev/ChefGesamtCockpit.htm

[Kropff]

sieht doch gut aus. ok, irgendwann ist feierabend, aber das wirst du so nicht vermeiden können, da du bei den tabellen feste breiten hast. ggf. solltest du auch mal mit prozentangaben arbeiten.

trotzdem wird das layout irgendwann immer zerschossen. und mal ganz ehrlich. wen juckt es, wenn jemand seinen browser SO klien zieht?

peter

[xJonx]

naja, da ist das problem: das ist quasi in einer software.
sprich: man hat kleine fenster mit scrollbalken ...

aber die info, das es vermutlich nie gehen wird, was
ja auch meine meinung war, reicht mir.
hatte halt noch hoffnung

[tontechniker]

Ich würde sagen, dass geht nur, wenn du die @-Werte alle floatest - dann werden entsprechend verschoben (ohne Tabelle natürlich). Damit kannst du aber nur einen kleinen Bereich abfangen. Die andere Möglichkeit ist noch & shy; an den entsprechenden Stellen einzufügen - das klappt aber auch nicht in allen Browsern.

[xJonx]

sagen wir es mal so: ich hab da jetzt einfach einen riegel vorgeschoben.
es gibt jetzt nur noch einspaltige seiten mit der box in einer festen breite.

Danke an euch!