Kleines Problem mit CSS und Layout

[Bibi]

Hallo liebe SELTHTML-Community,

ich bastele gerade an einer kleinen Webseite und habe ein Problem mit etwas CSS. Geplant ist eine Art Tabelle mit zwei Spalten via CSS. Im Internet Explorer wird es auch korrekt angezeigt, doch beim Firefox ist die Tabelle nur wenige Pixel hoch und somit nicht wie geplant.

Da Firefox normalerweise den Code korrekt umwandelt, habe ich wohl irgendwo einen Fehler im Code. Wer kann mir helfen und sagen wo er ist:

<div style="text-align: center;">
     <div style="width:700px; border: 1px dashed #777777; background-color: #ffffff; padding: 5px; ">
          <div style="width:400px; float: left; text-align: left;">
               <div style="color: #777777; font-size: 12pt; font-weight: bold;"> Überschrift 1: </div>
               <ul style="margin-top: 5px; list-style-type: circle;">
                   <li> Dies ist ein Mustertext </li>
               </ul>
          </div>
          <div style="width:300px; float: left; text-align: left;">
               <div style="color: #777777; font-size: 12pt; font-weight: bold;"> Überschrift 2: </div>
               <ul style="margin-top: 5px; list-style-type: circle;">
                   <li> Dies ist ein Mustertext </li>
                   <li> Dies ist ein Mustertext </li>
               </ul>
          </div>
     </div>
</div>

[wahsaga]

hi,

Im Internet Explorer wird es auch korrekt angezeigt, doch beim Firefox ist die Tabelle nur wenige Pixel hoch und somit nicht wie geplant.

https://forum.selfhtml.org/?t=156836&m=1020160

gruß,
wahsaga

[Bibi]

Hi wahsaga,

danke für die schnelle Hilfe. Ich bin den verlinkten Topics bis clear gefolgt und habe dann folgenden Code bei mir noch eingebaut:

<br style="clear:left;" />

Leider hat dies am Ergebnis nichts geändert. Mit der verlinkten absolute-Diskussion hat mein Problem doch nichts zu tun, oder?

Ich stehe momentan etwas auf dem Schlauch und weiß einfach nicht wo mein Fehler liegen könnte. Beide floats sind offenbar wichtig und ansonsten gibt es ja nicht viel wo ein Fehler sein könnte?

Liebe Grüße

Bibi

[wahsaga]

hi,

Ich bin den verlinkten Topics bis clear gefolgt

Hast du verstanden, _warum_ das Container-Element "keine" Höhe hat?

und habe dann folgenden Code bei mir noch eingebaut:

<br style="clear:left;" />

Wo?

gruß,
wahsaga

[Bibi]

Hi,

die BR-Codezeile habe ich hinter das DIV angefügt, welches für width:700px zuständig ist. An anderen Stellen wie z.B. ganz am Ende habe ich es auch probiert - da tut sich aber auch nichts ändern :(

Warum es im Grunde "keine" Höhe hat, habe ich nicht verstanden. height anzugeben ist jedoch sicher nicht die Lösung. Die Höhe sollte sich ja dem Inhalt anpassen normalerweise.

Habe eben auch versucht bei google etwas zu "null höhe css" und einige Variationen zu finden, doch leider ohne Erfolg :(

Liebe Grüße

Bibi

[wahsaga]

hi,

die BR-Codezeile habe ich hinter das DIV angefügt, welches für width:700px zuständig ist.

Da ist es natürlich ebenso sinnlos ...

An anderen Stellen wie z.B. ganz am Ende habe ich es auch probiert

... wie dort.

Warum es im Grunde "keine" Höhe hat, habe ich nicht verstanden.

Weil du mit float die Elemente aus dem Fluss genommen hast.

Und eben das musst du auch wieder aufheben - also gehört das clearende Element _wo_ hinter?

gruß,
wahsaga

[Bibi]

Hi wahsaga,

vielen Dank - nun klappt es... zumindest teilweise. Firefox zeigt den Kasten nun schön als Tabelle mit zwei Spalten an. Nur die Zentrierung durch das erste DIV wurde durch das CLEAR natürlich aufgehoben.

Wie bekomme ich den ganzen Kasten nun zentriert?

<div style="text-align: center;">
     <div style="width:700px; border: 1px dashed #777777; background-color: #ffffff; padding: 5px; ">
          <div style="width:400px; float: left; text-align: left;">
               <div style="color: #777777; font-size: 12pt; font-weight: bold;"> Überschrift 1: </div>
               <ul style="margin-top: 5px; list-style-type: circle;">
                   <li> Dies ist ein Mustertext </li>
               </ul>
          </div>
          <div style="width:300px; float: left; text-align: left;">
               <div style="color: #777777; font-size: 12pt; font-weight: bold;"> Überschrift 2: </div>
               <ul style="margin-top: 5px; list-style-type: circle;">
                   <li> Dies ist ein Mustertext </li>
                   <li> Dies ist ein Mustertext </li>
               </ul>
          </div><br style="clear:left;" />
     </div>
</div>

[wahsaga]

hi,

Wie bekomme ich den ganzen Kasten nun zentriert?

</hilfe/faq.htm#css-zentrieren>

Das äusserte Div sparst du dann dabei bitte ganz ein, es ist überflüsig (es sei denn, du wolltest auf uralte IE unbedingt noch Rücksicht nehmen).

gruß,
wahsaga

[Bibi]

Hi wahsaga,

jetzt klappt alles perfekt. Noch einmal vielen lieben Dank für die schnelle und kompetente Hilfe!

Liebe Grüße

Bibi

[MudGuard]

Hi,

<br style="clear:left;" />
Leider hat dies am Ergebnis nichts geändert.

Darf es ja auch gar nicht.
br hat display:inline, ist also ein inline-Element, clear wirkt nur bei block-level-Elementen.

cu,
Andreas