Wer kann mir bei CSS (Rahmenerstellung) kurz helfen ?

[Masterp]

Nabend,

ich bin gerade dabei mich etwas in CSS einzuarbeiten und dazu hab ich mir ein Template grob gebastelt, das komplett auf CSS aufbaut.
So, ich hab das Problem, dass ich in der Vorlage gern einen weiteren gelben Rahmen unter den jetzt platzierten Rahmen einfügen möchte (Bild).
Leider finde ich keine Positionsangaben bzw. wird mein zweiter Rahmen gar nicht angezeigt.

Platziert ist der Rahmen (gelb) mit:

#box_left{
background-color:#ffdb01;
width:160px;
height:60px;
margin-top:2px;
margin-bottom:2px;
padding-left:4px;
border:1px double #000000;
float:left;
}

Soweit sogut nur wie platziere ich den zweiten gewünschten Rahmen genau darunter ? Irgendwie fehlen Angaben für die koordinaten links und rechts.


Jemand eine Idee für mich ?

[Nase]

Deine "Koordinaten" sind in dem "float: left;". Eine weitere Box unter die gelbe bekommst du, indem du

a) das "float:left;" nach der ersten Box wieder aufhebst und dann die zweite Box zeichnest

oder

b) Box1 und Box2 in einen überliegenden Container steckst und diesen mit "float:left;" positionierst.

Was ich dir direkt sagen muss: Methode a) ist Quatsch, wenn du noch was rechts neben die Box schreiben willst ^^.

[Masterp]

Hm das kann nicht ganz stimmen:

Float: Läßt andere Elemente um ein mit float formatiertes Element herumfließen.

[Nase]

Soweit richtig. Die Box ist so eingestellt, dass sie mit "float:left;" auf der linken Seite ausgerichtet ist (es gibt ja auch "float: right;") und alle anderen Elemente rechts davon drumrum "fließen". Wenn du jetzt einfach eine zweite Box mit den gleichen Eigenschaften erstellst, fließt diese Box um die erste. Ergebnis: Quatsch. Um ein Element unter die Box, die mit einem float versehen ist, zu bekommen, musst du das float erst aufheben (mit "clear: left;"). Fügst du deine zweite Box dann ein, hast du beide untereinander. Wie ich aber schon sagte, bringt dir das nur bedingt etwas, da du ja rechts neben die Boxen auch noch Text oder sonstwas einfügen möchtest. Also würde ich das wie in b) angedeutet lösen. Erstelle einen leeren Container (mit div), gib diesem eine Breite, ein "float:left;" und in den Container steckst du deine Boxen rein (aber diesmal ohne das float).

[DanMan]

border:1px double #000000;

Wenn du double verwendest muss der Rahmen min. 3px breit sein, damit du die 2. Linie siehst.