Antworten zum Thema „Float / Container Problem - Total seltsam.“

einfachder · 15.07.2008

Hi,
Also mir ist heute beim coden ein total unerklärliches Problem vor die Augen getreten, oder besser gesagt zwei.

Ich habe die Seite hochgeladen und mit bunten DIVs ausgestattet damit wir uns besser einig werden.

Die Seite funktioniert TOP im Explorer - alles wird korrekt dargestellt, auch wie ich es von der Theorie her erwarte:

Im Firefox treten plötzlich zwei Fehler auf:
Problem 1:
Der Hintergrund im Content Container (da wo alle farbigen DIV Container untergebracht sind) wird nicht angezeigt! ? wieso ?

Die Lösung dafür habe ich wirklich sehr zufällig rausbekommen (aber hack-like - total unlogisch), aber ich möchte von euch erklärt haben woran das liegt? Weil der IE zeigt das normal an

Problem 2:
Der Menü Container sprengt das Design und ragt über den Content DIV hinaus - Wieso wächst der Content Container nicht mit???

Also nochmal die Datei als *.rar

Und hier einmal der Auszug aus der *.css:

Code:

@charset "utf-8";

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-size: 100%;
    vertical-align: baseline;
    background: transparent;
}

body, html {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 12px;
    margin-left: 0px;
    margin-top: 0px;
    margin-right: 0px;
    margin-bottom: 0px;
    line-height: 1;
    background-color:#3e3951;
    background-image: url(_design/bg_verlauf.png);
    background-attachment: fixed;
    background-repeat: repeat-x;
    min-height: 800px;
    text-align: center;
}

#redbalk {
    background-image: url(_design/roter_balken.png);
    background-repeat: repeat-x;
    text-align: center;
}

#maincon {
    margin-left: auto;     
    margin-right: auto; 
    width: 1000px;
}

#header {
    text-align: left;
    width: 1000px;
    height: 175px;
    background-image: url(_design/content_black.png);
    clear: left;
}

#content {
    width: 1000px;
    background-image: url(_design/content_black.png);
    background-position: center;
    clear: left;
}

#footer {
    width: 1000px;
    height: 120px;
    background-position: top;
    background-image: url(_design/content_black_footer.png);
    background-repeat: no-repeat;
    clear: left;
}

#dasding {
    width: 1000px;
}

#contentconticker {
    width: 800px;
    height: 50px;
    background-color: #00f;
    float: left;
}

#contentconmenu {
    width: 160px;
    background-color: #f00;
    float: right;
}

#contentconcontent {
    width: 800px;
    background-color: #0f0;
    float: left;
    clear: left;
}

Und hier die HTML Datei:

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" xml:lang="de" lang="de">
<head>
       <title>problem</title>
    <link href="_stylesheet.css" rel="stylesheet" type="text/css">
</head>

<body style="background-attachment: fixed;">
<div id="redbalk">    
    <div id="maincon">        
        <div id="header">        
            <div id="headercon1">
                <div id="headercon2">
                </div>
            </div>
        </div><!-- header -->
        
        <div id="content">    
            <div id="contentconticker">
            </div><!-- contentconticker -->
        
            <div id="contentconmenu">
            
            menu<br>menu<br>menu<br>menu<br>menu<br>menu<br>menu<br>menu<br>menu<br>menu<br>menu<br>menu<br>menu<br>menu<br>menu<br>menu<br>menu<br>
            menu<br>menu<br>menu<br>menu<br>menu<br>menu<br>menu<br>menu<br>menu<br>menu<br>menu<br>menu<br>menu<br>menu<br>menu<br>menu<br>menu<br>
            menu<br>menu<br>menu<br>menu<br>menu<br>menu<br>menu<br>menu<br>menu<br>menu<br>menu<br>menu<br>menu<br>menu<br>menu<br>menu<br>menu<br>
            menu<br>menu<br>menu<br>menu<br>menu<br>menu<br>menu<br>menu<br>menu<br>menu<br>menu<br>menu<br>menu<br>menu<br>menu<br>menu<br>menu<br>
            menu<br>menu<br>menu<br>menu<br>menu<br>menu<br>menu<br>menu<br>menu<br>menu<br>menu<br>menu<br>menu<br>menu<br>menu<br>menu<br>menu<br>
            menu<br>menu<br>menu<br>menu<br>menu<br>menu<br>menu<br>menu<br>menu<br>menu<br>menu<br>menu<br>menu<br>menu<br>menu<br>menu<br>menu<br>
            menu<br>menu<br>menu<br>menu<br>menu<br>menu<br>menu<br>menu<br>menu<br>menu<br>menu<br>menu<br>menu<br>menu<br>menu<br>menu<br>menu<br>
            
            </div><!-- contentconmenu -->
        
            <div id="contentconcontent">
            
            sdfasfkasfghasfklasfkasjfhasjkldfhasfjklhasf<br>sdfasfkasfghasfklasfkasjfhasjkldfhasfjklhasf<br>sdfasfkasfghasfklasfkasjfhasjkldfhasfjklhasf<br>sdfasfkasfghasfklasfkasjfhasjkldfhasfjklhasf<br>
            sdfasfkasfghasfklasfkasjfhasjkldfhasfjklhasf<br>sdfasfkasfghasfklasfkasjfhasjkldfhasfjklhasf<br>sdfasfkasfghasfklasfkasjfhasjkldfhasfjklhasf<br>sdfasfkasfghasfklasfkasjfhasjkldfhasfjklhasf<br>
            sdfasfkasfghasfklasfkasjfhasjkldfhasfjklhasf<br>sdfasfkasfghasfklasfkasjfhasjkldfhasfjklhasf<br>sdfasfkasfghasfklasfkasjfhasjkldfhasfjklhasf<br>sdfasfkasfghasfklasfkasjfhasjkldfhasfjklhasf<br>
            sdfasfkasfghasfklasfkasjfhasjkldfhasfjklhasf<br>sdfasfkasfghasfklasfkasjfhasjkldfhasfjklhasf<br>sdfasfkasfghasfklasfkasjfhasjkldfhasfjklhasf<br>sdfasfkasfghasfklasfkasjfhasjkldfhasfjklhasf<br>
            sdfasfkasfghasfklasfkasjfhasjkldfhasfjklhasf<br>sdfasfkasfghasfklasfkasjfhasjkldfhasfjklhasf<br>sdfasfkasfghasfklasfkasjfhasjkldfhasfjklhasf<br>sdfasfkasfghasfklasfkasjfhasjkldfhasfjklhasf<br>
            sdfasfkasfghasfklasfkasjfhasjkldfhasfjklhasf<br>sdfasfkasfghasfklasfkasjfhasjkldfhasfjklhasf<br>sdfasfkasfghasfklasfkasjfhasjkldfhasfjklhasf<br>sdfasfkasfghasfklasfkasjfhasjkldfhasfjklhasf<br>
            sdfasfkasfghasfklasfkasjfhasjkldfhasfjklhasf<br>sdfasfkasfghasfklasfkasjfhasjkldfhasfjklhasf<br>sdfasfkasfghasfklasfkasjfhasjkldfhasfjklhasf<br>sdfasfkasfghasfklasfkasjfhasjkldfhasfjklhasf<br>
            sdfasfkasfghasfklasfkasjfhasjkldfhasfjklhasf<br>sdfasfkasfghasfklasfkasjfhasjkldfhasfjklhasf<br>sdfasfkasfghasfklasfkasjfhasjkldfhasfjklhasf<br>sdfasfkasfghasfklasfkasjfhasjkldfhasfjklhasf<br>
            sdfasfkasfghasfklasfkasjfhasjkldfhasfjklhasf<br>sdfasfkasfghasfklasfkasjfhasjkldfhasfjklhasf<br>sdfasfkasfghasfklasfkasjfhasjkldfhasfjklhasf<br>sdfasfkasfghasfklasfkasjfhasjkldfhasfjklhasf<br>
            sdfasfkasfghasfklasfkasjfhasjkldfhasfjklhasf<br>sdfasfkasfghasfklasfkasjfhasjkldfhasfjklhasf<br>sdfasfkasfghasfklasfkasjfhasjkldfhasfjklhasf<br>sdfasfkasfghasfklasfkasjfhasjkldfhasfjklhasf<br>
            
            </div><!-- contentconcontent -->
        </div><!-- content -->
        
        <div id="footer">
        </div><!-- footer -->
        
    </div><!-- maincon -->
</div>
</div><!-- redbalk -->
</body>
</html>

Liebe Grüße, Vito

pharkothedarko · 15.07.2008

AW: Float / Container Problem - Total seltsam.

soweit ich weiss können div's nicht "mitwachsen". normalerweise regelt man das indem man den hintergrund des wrappers so anlegt als würde es so aussehen als würde der content mitwachsen.

korrigiert mich falls ich falsch liege.

einfachder · 15.07.2008

AW: Float / Container Problem - Total seltsam.

ich denke, dass du falschst liegst - Div's können mitwachsen ...
pls help :/
gruß

augentier · 15.07.2008

AW: Float / Container Problem - Total seltsam.

Du musst nach <div id="contentconcontent"> ein Div mit der Eigenschaft { clear: both } setzten. Das dürfte dein Problem lösen.

HTML:

<div id="contentconcontent">
...
</div>
<div class="clear"></div>

CSS

Code:

.clear {
clear: both;
}

Mehr dazu unter clear: Umfließen von Elementen beenden: CSS-Referenz auf CSS 4 You - The Finest in Stylesheets

PS: Es gibt speziellen Platzhaltertext, der nennt sich Lorem ipsum

pur · 15.07.2008

AW: Float / Container Problem - Total seltsam.

für dein zweites Problem, das müsste das Problem mit den unterschiedlich langen Spalten lösen.

Beste Grüße

einfachder · 15.07.2008

AW: Float / Container Problem - Total seltsam.

hey pur, nein leider hat das vollkommen nichts mit dem problem zutun

trotzdem danke...

hab das problem mit einem clearfix gelöst (hauptsächlich clear: both)

thx.

lg, vito