Anfänger braucht Hilfe; CSS Layout

Hallo,

wie der Titel des Beitrags schon erahnen lässt bin ich was das Thema CSS angeht ein Anfänger. Daher bräuchte ich noch ein paar Tipps woraus ich noch ein wenig lernen kann.

Es geht folgend um dieses Beispiel: http://dl.dropbox.com/u/6915032/dunkel.blicke/index.html

Bei dieser Seite habe ich 3 Fragen.

1: Wie sinnvoll ist es für den #content Bereich der Seite eine Minimale Höhe anzugeben, bzw. was würde dagegen sprechen.

2: Lasse ich mir mit dem Firebug anzeigen wie die Boxen auf der Seite verteilt sind fällt auf das die Box welche "h4" definiert eine bestimmte Breite hat und nicht die Breite der Hintergrundgrafik überschreitet.
Dieses verhalten würde ich mir auch von der Box #content_main wünschen da deren Endbereich auf der rechten Seite die Hintergrundgrafik überschreitet dessen Rand. Aber meine Versuche mit einer padding bzw. margin Definition zur rechten Seite waren ergebnislos. Was mache ich an dieser Stelle falsch, bzw. wo liegt mein Denkfehler?

3: Auf den Seiten ".festival" bzw. ".foto.art" wollte ich mit Listen einen Tabelleneffekt erreichen. Soll heißen ich habe beispielsweise drei Listen. Die einzelnen Listen möchte ich nebeneinander anordnen. Die Listenpunkte jedoch möchte ich untereinander anordnen.

Zu dieser Frage hatte ich schon mal ein Beitrag eröffnet https://www.forum-hilfe.de/showthread.php?t=48285 allerdings habe ich anscheint soviel mit dem Code gespielt das ich mir irgendwo ein Eigentor geleistet habe. Nun ja das Ergebnis seht ihr ja. Daher auch hier meine Frage was mache ich falsch?

MfG
mephisto2k

Hallo und erst mal Danke an Dodo und synaptic.

Ein kleiner Zwischenstand.

Zu 1: Ich habe mich auf die Suche begeben zum Thema Browserkompatibilität und bin auf css4you fündig geworden. Dort steht das "min-height" soweit von allen modernen Browsern verstanden wird. Der IE6 gehört hier nicht dazu aber der ist mit neun Jahren auch alles andere als up-to-date. Und für meine Zwecke reicht eine relativ aktuelle Unterstützung. Zur not gibt es auch hierfür einen hack, nur ob ich so etwas einsetze weiß ich noch nicht. - Der Tipp von synaptic geht ja auch in die Richtung.

Zu 2: Wie schön das die Welt manchmal auch einfach sein kann

Zu 3: Hier habe ich mich entschieden bei der float Variante zu bleiben da die Pseudotabelle nur dem Design dienlich sein soll. Schließlich handelt es sich um keine Fakten welche in ein Tabelle müssen.

Anscheinend funktioniert das ganze auch bei mir, ich habe nur ein Problem mit zu langen Texten, was den Effekt hat das sich die Listen (<ul></ul>) teilweise doch wieder untereinander anordnen.

Die Listen sind Kinderelemente von der ID #content_main, diese Box habe ich nun mit einer festen breite definiert. Daher würde ich annehmen das die Kinderelemente die Begrenzung max-width des Elternelementes als Grenze hinnehmen...

Also habe ich die Listenbreite ebenfalls mit max-width begrenzen wollen. Das funktioniert auch mit einer festen Angabe von px aber wenn ich die Breite bei Listen mit 33% begrenzen möchte habe ich nur ganz schmale und abgehackte Listen.

Habe ich hier wieder irgendwo einen Denkfehler?

MfG
mephisto2k

Ok ein kleines Auszug

CSS

#content_main {
    margin: 0 20px 0 240px;
    min-height: 500px;
    width: 600px;
}


#content_main ul li {    
    overflow: hidden;
    padding: 10px 0; /*oberer und unterer Innenabstand (10px) und linken und rechte abstand (0)*/
}


#content_inline ul {
    float: left;
    margin-right: 80px;
    /*max-width: 33%;*/
    text-align: center;
}


#content_inline h4 {
    display: block;
    /*max-width: 33%;*/
}

#content_inline li {
    display: block;
    font-size: .9em; /*Schriftart ist bereits im body definiert*/
        /*max-width: 33%;*/
}

HTML

<div id="content_inline" >
  <ul>
   <li><h4>111</h4></li>
   <li>1 unten</li>
   <li>12111</li>
  </ul>
  <ul>
   <li><h4>222</h4></li>
   <li>2 unten</li>
   <li>212222</li>
  </ul>
<div style="clear:both;"></div> 
</div>

Das Problem habe ich nun in den Griff bekommen.

Danke an alle fleißigen Helfer

MfG
mephisto2k