• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Box wächst bei Zunahme des Inhaltes mit

Corraggiouno

Mitglied
mein css-code:
Code:
#box {
background: #CCC;
border: 1px solid #666;
font-family: Verdana;
font-size: 12px;
color: #333; 
position: fixed;
width: 500px;
height: 600px;
top: 50%;
left: 50%;
margin-top: -300px;
margin-left: -250px;
 
}

#underbox {
background: #red;
border: 1px solid #666;
font-family: Verdana;
font-size: 12px;
color: #333; 
position: relative;
width: 400px;
height: 300px;
top: 50%;
left: 50%;
margin-top: -150px;
margin-left: -200px;

Bin noch ein ziemlicher Anfänger was CSS betrifft. Aber vielleicht könnt ihr mir weiterhelfen.
Ich beschreibe dies mal im groben. Habe einen DIV-Bereich (box) und in diesem befindet sich ein erneuter DIV-Bereich (underbox). Wenn sich nun der Inhalt in der Box vermehrt, schiebt sich die Underbox nach unten. Bei reinen HTML-Tabellen wächst bzw. vergrüßert sich die Tabelle wenn sich der Inhalt vermehrt!
Wie kann ich das in CSS realisieren?
 
Eigentlich befinden die sich ja nicht ineinander, da sie durch "position" aus dem Textfluss genommen werden.

Aber ich kann Deine Aussagen ohne kompletten Code nicht überprüfen. CSS ohne HTML ist nichts.

Normalerweise vergrößert sich ein Element immer mit dem Inhalt.
 
Grundsätzlich kann man mit CSS fast alles realisieren.
Es kommt nur drauf an, was du dir vorstellst.
Diese Konstruktion macht m.E. nur dann Sinn, wenn du die underbox mit Inhalt füllst.
Wenn die underbox "stehen bleiben" soll, dann ersetze "position: relative" durch "position: absolute".
Das hat dann aber den Nachteil, dass der Inhalt von box sich über underbox erstreckt.

Absolute Positionierungen sollte man nur gezielt einsetzen und ansonsten besser vermeiden.
Überleg dir nochmal genau, was du vor hast und schildere etwas genauer, wie du dir das im Ergebnis vorstellst.
 
Zurück
Oben