Abstand behalten

[Kurt Eisermann]

Guten Tag,

ich habe ein Problem mit CSS. Zuerstmal möchte ich mein Problem erklären.
Untereiander habe ich 2 div's geschrieben:

<div>...</div>  
<div>...</div>

Zwischen beiden div's soll immer ein Abstand von 10px vorhanden sein.
Im ersten div kommen nochmal 3 div's mit jeweils der Höhe 211px vor. Manchmal kann es auch sein das eine der drei div's 225px hoch ist. Dann verschiebt sich die Box automatisch nach unten und der Abstand von 10px ist weg: Hier die Situation des HTML-Codes:

<div class="sub_cat_none">  
 <div class="box_1"></div>  
 <div class="box_2"></div>  
 <div class="box_2"></div>  
</div>  
<div class="sub_cat_upper">  
 <div class="box_1"></div>  
</div>
~~~der CSS-Code dazu:  
  
~~~css
.sub_cat_none {  
width : 654px;  
display : block;  
min-height : 211px;  
max-height : 225px;  
}  
.sub_cat_upper {  
width : 654px;  
margin : 10px 0px 0px 0px;  
min-height : 211px;  
max-height : 225px;  
}  
.box_1 {  
width : 196px;  
max-height : 225px;  
}  
.box_2 {  
float : left;  
margin : 0 0 0 33px;  
width : 196px;  
max-height : 225px;  
} 

Wie kann man den Abstand von 10px erfolgreich einstellen?

[Beat]

ich habe ein Problem mit CSS. Zuerstmal möchte ich mein Problem erklären.
Untereiander habe ich 2 div's geschrieben:

<div>...</div>

<div>...</div>

> Zwischen beiden div's soll immer ein Abstand von 10px vorhanden sein.  
> Im ersten div kommen nochmal 3 div's mit jeweils der Höhe 211px vor. Manchmal kann es auch sein das eine der drei div's 225px hoch ist. Dann verschiebt sich die Box automatisch nach unten und der Abstand von 10px ist weg: Hier die Situation des HTML-Codes:  
  
Wer float sagt, sollte an clear denken...  
  
mfg Beat

-- 
Woran ich arbeite:  
[X-Torah](http://www.elcappuccino.ch/cgi/tok.pl?extern=1-pub-com3306-1)  
   <°)))o><                      ><o(((°>o  

[bleicher]

Grüße,
float führt dazu, dass der box aus dem fluß fällt und margin auf ihn nicht angewendet wird. du musst den ersten div um einen elemt ergänzen, der den float cleart, dodass die erste div sich mitvergößert und der marginabstand gehalten wird.

der wird eigentlich auch so eingehalten - bloß dass er zwischen den sub_cat gilt, ist die innere box größer, schaut die "über den rand".
MFG
bleicher

[Kurt Eisermann]

Grüße,
float führt dazu, dass der box aus dem fluß fällt und margin auf ihn nicht angewendet wird. du musst den ersten div um einen elemt ergänzen, der den float cleart, dodass die erste div sich mitvergößert und der marginabstand gehalten wird.

der wird eigentlich auch so eingehalten - bloß dass er zwischen den sub_cat gilt, ist die innere box größer, schaut die "über den rand".

du meinst ich soll hinter die dritte box noch ein <div> machen, d.h.
<div style="height: 0px; width: 0px; clear: left"></div>

Meinmst du das so?

[bleicher]

Grüße,

du meinst ich soll hinter die dritte box noch ein <div> machen, d.h.
<div style="height: 0px; width: 0px; clear: left"></div>

eher <span style="visibility:hidden; clear:left"></span>
kan auch div sein (ich mag zB <hr>) - aber die maße solltest du nicht ändern - setzt visibility auf hidden und gut ist.

MFG
bleicher

[Kurt Eisermann]

Grüße,

du meinst ich soll hinter die dritte box noch ein <div> machen, d.h.
<div style="height: 0px; width: 0px; clear: left"></div>

eher <span style="visibility:hidden; clear:left"></span>
kan auch div sein (ich mag zB <hr>) - aber die maße solltest du nicht ändern - setzt visibility auf hidden und gut ist.

Kann man das nicht irgendwie eleganter machen? Geht das nicht irgendwie mit Listen?

[Thorsten Schleppi]

Hallo!

Kann man das nicht irgendwie eleganter machen? Geht das nicht irgendwie mit Listen?

Verrat doch einfach mal was du realisieren möchtest. Unter Umständen könnte dann eine Liste sinnvoll sein.
Du solltest auf alle Fälle vermeiden Elemente zweckzuentfremden.

Viele Grüße
Thorsten

[Beat]

Du solltest auf alle Fälle vermeiden Elemente zweckzuentfremden.

Ein div bleibt ein div bleibt ein div. Ich kann es nicht zweckentfremden. Ich kann nur so tun, als ob...

mfg Beat

[Thorsten Schleppi]

Hallo!

Ein div bleibt ein div bleibt ein div. Ich kann es nicht zweckentfremden. Ich kann nur so tun, als ob...

Ich meinte die Liste, nicht das div.
Eine Liste kann ich sehr wohl zweckentfremden.

Viele Grüße
Thorsten

[Kurt Eisermann]

Verrat doch einfach mal was du realisieren möchtest. Unter Umständen könnte dann eine Liste sinnvoll sein.
Du solltest auf alle Fälle vermeiden Elemente zweckzuentfremden.

Ich möchte drei Boxen nebeneinander darstellen. In einer Box soll jeweils ein Bild und darunter Text stehen, sowie bei einer Nachrichtenseite woman mehrere Schlagzeilen nebeneinander positioniert.

[bleicher]

Grüße,

Kann man das nicht irgendwie eleganter machen? Geht das nicht irgendwie mit Listen?

doch - aber inweifern sollte
<ul style="clear:both; visibility:hidden"></ul>
eleganter sein? das auslagern der style angaben in css wäre natürlich in jedem fall empfehlenswert. ein "clear"-classe der hr fand ich bisher praktisch.
MFG
bleicher

[Thorsten Schleppi]

Hallo!

Zwischen beiden div's soll immer ein Abstand von 10px vorhanden sein.

Wenn ich dich richtig verstanden habe, sollte es reichen, wenn du deiner zweiten Box (sub_cat_upper) ein clear gibst.

Darauf hat dich Beat indirekt aber auch bereits hingewiesen.

Viele Grüße
Thorsten