Problem mit Zeilenumbruch

[David Aurelio]

Hallo Kalle,

1.) Warum so umständlich?
Das ginge doch auch ohne das div zum clearen:

  
.row  {border-bottom:1px solid #ccc}  
.sp01 {width:10em; float:left}  
.sp02 {margin-left:10em;}  

  
<div class=row>  
  <div class=sp01>Name:</div>  
  <div class=sp02>Kalle</div>  
</div>  
<div class=row>  
  <div class=sp01>Bundesland:</div>  
  <div class=sp02>Hessen</div>  
</div>  

Nun das Problem: Können Blinde den Zeilenwechsel bei diesem Design eigentlich fühlen?

Wenn Du Dir schon Gedanken um Barrierefreiheit machst, solltest Du Div-Suppen vermeiden und Deine Gedanken um das Thema sinnvolles Markup erweitern.

Dein Beispiel sieht nach einer Definitionsliste aus. Warum nicht eine solche benutzen?

  
<dl>  
    <dt>Name:</dt>  
    <dd>Kalle</dd>  
    <dt>Bundesland:</dt>  
    <dd>Hessen</dd>  
</dl>  

Die kann man auch prima formatieren, z.B. so:

  
dt {  
    clear: both; /* cleart vorangegangene dts */  
    float: left;  
    width: 10em;  
}  
  
dd {  
    border-bottom: 1px solid #ccc;  
    margin-left: 10em;  
}  

Und, für Fortgeschrittene, damit dts, die länger sind als die folgenden dds oder am Ende alleine stehen, nicht unten über die Liste hinausragen:

  
dl {  
    *height: 1px; /* Für den IE. Wird von anderen Browsern nicht gesehen,  
                     Macht, das die Box auch um gefloatete Elemente herum erweitert wird. */  
}  
  
dl:after {  
    content: "."; /* Für andere Browser */  
    display: block;  
    height: 0;  
    clear: both;  
    visibility: hidden;  
}