Floating madness

**petz_e** · 12-08-2008, 15:06

Hallo,

Ich habe da ein Problem mit einer einfachen Webpage. Der Footer wird nicht als letztes angezeigt, sondern direkt unter dem Header platziert. Das Problem ist wohl das floating des Contents (Thumbnails). Muss ich also alle Elemente der ganzen Seite floaten damit sie die Grösse ihrer Childs annehmen?

HTML:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  
  <title>Webpage</title>
  
  <link rel="stylesheet" type="text/css" href="styles.css" />
</head>

<body>
  
  <div id="page">
  
    <div id="header">
        <div id="banner"><p>Title</p></div>
    </div>
    
    <div id="content">
        
        <p>Main Area.</p>
        
        <div id="portfolio">
            <ul class="thumb">
                <li><a href="/"><img src="gallery/thumb/01.jpg" /></a></li>
                <li><a href="/"><img src="gallery/thumb/02.jpg" /></a></li>
                <li><a href="/"><img src="gallery/thumb/03.jpg" /></a></li>
                <li><a href="/"><img src="gallery/thumb/04.jpg" /></a></li>
                <li><a href="/"><img src="gallery/thumb/05.jpg" /></a></li>
            </ul>
        </div>

    
    </div>
    
    <div id="footer"><p>copyright information</p></div>
  </div>

</body>

</html>

STYLESHEET

Code:

html {
    height: 100%;
}

body, dd, dl, dt, form, h1, h2, h3, h4, h5, h6, li, ol, p {
    margin: 0;
    border: 0 none transparent;
    padding: 0;
}

img {
    border: 0;
}

body {
    height: 100%;
    color: #000;
    font-family: Arial, Helvetica, sans-serif;
    text-align: center;
    background: #000 url(images/bg.png);
}

#page {
    width: 772px;
    margin: 0 auto;
    text-align: left;
}

#header {
    height: 243px;
    background: url(images/top.png) no-repeat;
}

#header p {
    text-indent: -9999px;
}

#content {
    float: left;
    padding: 10px;
    background: url(images/page.png) repeat-y;
}

#footer {
    height: 68px;
    background: url(images/foot.png) no-repeat;
}

#footer p {
    text-indent: -9999px;
}



#portfolio {
    float: left;
}


ul.thumb {
    margin: 0;
    padding: 0;
    width: 100%;
    list-style: none;
}

ul.thumb li {
    float: left;
    margin: 0;
    padding: 0;
}

Patrick

**dkdenz** · 12-08-2008, 18:28

Wenn Du floatest musst Du auch irgendwann, irgendwo clearen: clear: Umfließen von Elementen beenden: CSS-Referenz auf CSS 4 You - The Finest in Stylesheets

**petz_e** · 12-08-2008, 18:38

Zitat von dkdenz

Wenn Du floatest musst Du auch irgendwann, irgendwo clearen: clear: Umfließen von Elementen beenden: CSS-Referenz auf CSS 4 You - The Finest in Stylesheets

Ich habe jetzt beim Footer ein clear gesetzt. Damit der Content-Container dieselbe Höhe hat wie das gefloatete Portfolio UL, habe ich dieses auch gefloatet. Wenn ich jetzt jedoch versuche ein Padding, also einen Innenabstand für den Content zu setzen, läuft die Breite über.

Wie kann man dieses Problem ungehen? Währe schon schön wenn ich einen globalen Innenabstand für den Inhalt des Hauptcontainers angeben könnte.

So sieht es jetzt aus:

Code:

html {
    height: 100%;
}

body, dd, dl, dt, form, h1, h2, h3, h4, h5, h6, li, ol, p, a, img {
    margin: 0;
    padding: 0;
    border: 0 none transparent;
}

body {
    height: 100%;
    text-align: center;
    background: #000 url(images/bg.png);
}

#page {
    width: 772px;
    margin: 0 auto;
    background: #fff;
    text-align: left;
}

#header {
    height: 243px;
    background: red;
}

#content {
    float: left;
    clear: left;
    width: 772px;
    padding: 10px;
    background: green;
}

#footer {
    float: none;
    clear: left;
    height: 68px;
    background: blue;
}

/* Portfolio */

ul.thumb {
    margin: 0;
    padding: 0;
    width: 100%;
    list-style: none;
    float: left;
}

ul.thumb li {
    width: 160px;
    height: 120px;
    float: left;
}

Patrick

**anna55** · 13-08-2008, 01:20

Ausgehend von Deinem zuerst geposteten Code und weil mir ein wenig schwindlig wurde vom vielen float, habe ich content und portfolio geändert:

PHP-Code:


#content {

    display: block;

    padding: 50px;

    background: url(images/page.png) repeat-y;

}



#portfolio {

    display:table;

}

Padding reduzierst Du natürlich wieder!

**petz_e** · 13-08-2008, 01:32

display: table wird das in IE unterstützt?

-> display: Anzeigeart: CSS-Referenz auf CSS 4 You - The Finest in Stylesheets

**anna55** · 13-08-2008, 01:40

Nun, der IE hätte das nicht nötig gehabt. Der FF hat mit der Höhe gezickt. Das Aussehen war identisch mit FF2, Opera, Safari, IE6 und IE7. Du kannst ja mal hier schauen:
IE NetRenderer - Browser Compatibility Check - (für die IEs)

**petz_e** · 13-08-2008, 12:00

Ohne Float:

width: 100%;
padding: 10px;

wird korrekt angezeigt. Mit Float wird das Padding zusätzlich zu den 100% dazugerechnet. Also arbeite ich mit festen Breiten und ziehe das Padding von der Breite ab. Dann siehts wieder korrekt aus.

**anna55** · 13-08-2008, 12:14

Zitat von petz_e

Also arbeite ich mit festen Breiten und ziehe das Padding von der Breite ab. Dann siehts wieder korrekt aus.

Klar geht das auch, zumal Du bei page eine feste Breite angegeben hast. Verstehe trotzdem die vielen floats nicht.

**petz_e** · 13-08-2008, 14:27

Zitat von anna55

Verstehe trotzdem die vielen floats nicht.

In meinem 2. Beispiel oder im 1?

Die Grundidee ist eine Thumbnail-Gallery, wobei ich die Bilder als unordered-list angebe und mit float nebeneinander setze. Ich habe mal gelesen dass man mit float auf 2 Dinge achten muss:

a) die Breite der gefloateten Elemente wird auf die kleinsmögliche Breite reduziert wenn keine explizite Breite angegeben ist, und

b) die Elterncontainer nehmen nicht mehr die Höhe der gefloateten Elemente an, es sei denn sie werden ebenfalls gefloatet. Und das habe ich im 2. Beispiel versucht zu machen. Jedoch endet das damit dass die gesamte Seite ein float: left bekommt

Eine feste Höhe für die Elternobjekte ist ausgeschlossen, da ich ja nicht weiss wie hoch der Inhalt ist (der nachher dynamisch erzeugt wird).

Patrick