Tabellendesign mit Divs

[MCTimotheus]

Hallo,

ich habe ein kleines Problem mit meinen Divs. Im folgenden Code sind 4 Divs beschrieben, die nebeneinander stehen soll. Diese sind mit einem weiteren Div umschlossen, der eine Hintergrundfarbe hat. Problem ist nun, dass die 4 Divs zwar nebeneinander angezeigt werden, der umschließende aber ignoriert wird, sprich er ist im Grunde garnicht da.

  
<div id="searchArea">  
  <div class="searchLens">Spalte 1</div>  
  <div class="searchDesc">Spalte 2</div>  
  <div class="searchInput">Spalte 3</div>  
  <div class="searchButton">Spalte 4</div>  
</div>  
<div style="clear:both;">&nbsp;</div>  

und hier der dazugehörige CSS-Code:

  
#searchArea  
{  
   width:603px;  
   background-color:#E3E3E3;  
}  
  
  .searchLens  
  {  
     float:left;  
  }  
  
  .searchDesc  
  {  
     float:left;  
  }  
  
  .searchInput  
  {  
     float:left;  
  }  
  
  .searchButton  
  {  
     float:left;  
  }  

Vielleicht kennt jemand ja auch eine bessere CSS-Formatierung, wie man 4 Divs nebeneinander setzt und diese dann mit einem anderen Div umschließt. Ich gehe mal davon aus, dass es sicher eine bessere Lösung als meine gibt ...

Liebe Grüße und danke für eure Hilfe,

MCT

[suit]

tipp: schmeiss es weg und ersetz es gegen semantisch richtige elemente

du kannst auch fieldsets, forms, labels, inputs und buttons mit css formatieren -

um dein problem zu lösen solltest du den textflusswiederherstellenden div (den mit clear) in den äusseren reinpacken

mit

  
#searchArea div {  
  float:left;  
}  

sparst du dir übrigens gute 80% deines stylesheets

[MCTimotheus]

Hey, erstmal danke für die schnelle Antwort. Leider hat es so jedoch nicht funktioniert. Ich habe nen die Höhe des umschließenden Divs fest definiert, dann tut es zumindest mal seinen Zweck.

Frage jetzt aber, kennst du / ihr eine gute Seite, wie "tabless"-Design mal genauer beschrieben wird bzw. solche Vorgehensweisen wie oben kurz und knapp geschildert werden?

Liebe Grüße,

MCT

[suit]

Frage jetzt aber, kennst du / ihr eine gute Seite, wie "tabless"-Design mal genauer beschrieben wird bzw. solche Vorgehensweisen wie oben kurz und knapp geschildert werden?

die selfhtml kapitel hierzu finde ich nicht so berauschend, aber css4you ist in dem punkt empfehlenswert
http://www.css4you.de/wslayout1/index.html

[Christoph]

Moin.

Frage jetzt aber, kennst du / ihr eine gute Seite, wie "tabless"-Design mal genauer beschrieben wird bzw. solche Vorgehensweisen wie oben kurz und knapp geschildert werden?

Hilft dir vielleicht Mathias' Artikel weiter?

Christoph