✔ Positionierung Divs

[ne0hype]

Hallo,

ich habe mir mal ein paar Seiten im Internet angeschaut die sich mit dem Thema befasst haben, dabei ist mir immer wieder diese Darstellung aufgefallen

<div style="float:left">erster div</div>
<div style="float:left">zweiter div</div>
<div style="clear:both"></div>

Ich finde diesen "clear:both" div irgendwie unschön. Gibt es keine andere Möglichkeit mehere divs nebeneinander aufzulisten?

Gruß
ne0hype

 

[Maik]

Hi,

http://positioniseverything.net/easyclearing.html dürfte da für dich ganz interessant sein, wenn es darum geht, das "clearing"-DIV aus dem HTML-Code zu verbannen.

 

[ne0hype]

Hallo,
danke für die Seite, aber wie sieht es mit dem W3C Standart aus?

 

[Maik]

Du kannst dich davon selbst überzeugen, indem du einfach das Stylesheet vom CSS-Validator überprüfen lässt ;-)

.clearfix:after {
content: "."; 
display: block; 
height: 0; 
clear: both; 
visibility: hidden;
}

.clearfix {display: inline-block;}

/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */

 

[ne0hype]

OK die Lösung ist besser als der unschöne "clear" DIV, aber so ganz die optimale Sache ist es auch net. Geht sowas nicht mit einem Listenelement, welches dann per CSS gestaltet wird?

 

[Maik]

Eine Floatumgebung muss mit der clear-Eigenschaft aufgehoben werden, um im Dokument wieder den normalen Textfluss herzustellen.

 

[ne0hype]

Ja aber meine Frage war ja ob es vielleicht geht die DIVs in ein Listenelement zu packen welches dann mit "inline" umgestaltet wird. Oder ist das noch unschöner?

 

[Maik]

Selbstverständlich ist es auch möglich, die DIVs in eine Liste einzubetten, deren Listenpunkte mit display:inline horizontal ausgerichtet sind. Nur müssten die DIVs dann ebenfalls mit display:inline formatiert werden, damit sie keinen Zeilenumbruch im Textfluss erzeugen.

Ob dieses "Konstrukt" von Nutzen ist, kommt dann auf das Anwendungsgebiet an.