Problem mit Clear und Float

Lupina · 30.10.2011

Hallo Leute,

ich habe folgendes Problem:

Ich möchte gerne unsere neue Clanseite bauen, bin auch soweit gut voran gekommen und wieder vor einem alt-bekannten Problem. Der Wrapper macht mit min-height faxen und wächst nicht weiter obwohl ich bei fast jedem Div Element die class="clear" gesetzt habe. Ich poste euch mal den Quelltext,
ich sitze schon 10 Stunden heute daran, habe den kompletten Quellcode + Design heute 7 mal neugemacht und finde den Fehler warscheinlich schon aus der Erschöpfung heraus nicht mehr.

Quellcode HTML:

HTML:

<!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=iso-8859-1" />
<title>The official Website of EviatGaming - www.eviat.de</title>
<link type="text/css" rel="stylesheet" href="../Stylesheet/css.css" />
</head>

<body>
<div id="Wrapper" class="clear">
<div id="Box" class="clear">
    <div id="Headerbg" class="clear">
        <div id="socialnetwork" class="clear">
            <div class="socialnetworkinnen">
                <div class="facebook"></div> <!-- End of Facebook -->
                <div class="twitter"></div> <!-- End of Twitter -->
                <div class="youtube"></div> <!-- End of Youtube -->
                <div class="steam"></div> <!-- End of Steam -->
            </div> <!-- End of Socialnetworkinnen -->
        </div> <!-- End of Socialnetwork -->
        <div id="latestnews" class="clear">
                <div class="latestnewsinhalt">
                Platzhalter<br />
                </div> <!-- End of Latestnewsinhalt -->
        </div> <!-- End of Latestnews -->
    </div> <!-- End of Headerbg -->
</div> <!-- End of Box -->

<div id="Box2">

    <div id="Links" class="clear">
        <div id="Navigationsheader" class="clear">
            <li class="main"><a href="#"></a></li>
            <li class="clan"><a href="#"></a></li>
            <li class="multimedia"><a href="#"></a></li>
            <li class="contact"><a href="#"></a></li>
        </div> <!-- End of Navigationsheader -->
        
    </div> <!-- End of Links -->
    
    <div id="Rechts">
        <div id="Contentheader">
        </div> <!-- End of Contentheader -->
    </div> <!-- End of Rechts -->
</div> <!-- End of Box2 -->

<div id="Box3">

    <div id="Links_">
        <div class="navigationsinhalt">
        Platzhalter<br />
        </div> <!-- End of Navigationsinhalt -->
    </div> <!-- End of Links_ -->
    
    <div id="Rechts_">
        <div class="contentinhalt">    
        Platzhalter<br />
        Platzhalter<br />Platzhalter<br />Platzhalter<br />Platzhalter<br />Platzhalter<br />Platzhalter<br />Platzhalter<br />Platzhalter<br />Platzhalter<br />                    Platzhalter<br />Platzhalter<br />Platzhalter<br />
        Platzhalter<br />Platzhalter<br />Platzhalter<br />Platzhalter<br />Platzhalter<br />
                Platzhalter<br />Platzhalter<br />Platzhalter<br />Platzhalter<br />Platzhalter<br />Platzhalter<br />Platzhalter<br />Platzhalter<br />Platzhalter<br />                    Platzhalter<br />Platzhalter<br />Platzhalter<br />
        Platzhalter<br />Platzhalter<br />Platzhalter<br />Platzhalter<br />Platzhalter<br />
        </div> <!-- End of Contentinhalt -->
    </div> <!-- End of Rechts_ -->
</div> <!-- End of Box3 -->

</div> <!-- End of Wrapper -->
</body>
</html>

Quellcode CSS:

Code:

/* Universal Selector */

*
{
margin:0 auto;
}

/* HTML Code */
html
{
height:100%;
font-family:Arial, Helvetica, sans-serif;
font-size:11px;
color:#000000;
}

/* Body Code */
body
{
width:100%;
height:100%;
background:#d0d0d0;
}



/* Wrapper */
#Wrapper
{
background:url(../Pictures/Backgroundbg.png);
width:1058px;
min-height:100%;
clear:both;
}


/* Box */
#Box
{
width:1024px;
height:148px;
}
        /* Header Code */
        #Headerbg
        {
        background:url(../Pictures/Header-BG.png);
        width:1024px;
        height:148px;
        }
            /* Header p Code */
            #Headerbg p
            {
            font-size:11px;
            padding-left:120px;
            padding-top:1px;
            }
                /* Socialnetwork Code */
                #socialnetwork
                {
                background:transparent!important;
                width:211px;
                height:auto;
                }
                    /* Socialnetworkinnen Code */
                    .socialnetworkinnen
                    {
                    width:211px;
                    height:auto;
                    padding-left:120px;
                    padding-top:70px;
                    }
                        /* Facebook Code */
                        .facebook
                        { background:url(../Pictures/icons/Facebook_32x32.png); width:32px; height:32px; float:left; }
                        /* Twitter Code */
                        .twitter
                        { background:url(../Pictures/icons/Twitter_32x32.png); width:32px; height:32px; float:left; }
                        /* Youtube Code */
                        .youtube
                        { background:url(../Pictures/icons/Youtube_32x32.png); width:32px; height:32px; float:left; }
                        /* Steam Code */
                        .steam
                        { background:url(../Pictures/icons/steam_32x32.png); width:32px; height:32px; float:left; }
            /* Latestnews Code */
            #latestnews
            {
            background:transparent;
            width:132px;
            margin-left:880px;
            }
                /* Latestnewsinhalt Code */
                .latestnewsinhalt { border-bottom:1px; border-color:#717171px; width:132px; height:12px;
                font-size:12px; color:#000000;  }
                
                
                /* End of Box 1 */
                
/* Box 2 */
#Box2
{
width:1024px;
height:30px;
margin-top:50px;
}    
        /* Links Code */
        #Links
        {
        background:transparent;
        width:440px;
        height:30px;
        float:left;
        clear:both
        }
        
            /* Navigationsheader Code */
            #Navigationsheader 
            {
            text-indent:-99999999999px;
            }
            /* Navigationsheader a Code */
            #Navigationsheader a
            {
            background:url(../Pictures/navigationheader.png) top center no-repeat;
            height:32px;
            display:block;
            text-decoration:none;
            }
            /* Navigationsheader li Code */
            #Navigationsheader li
            {
            float:left;
            list-style-type:none;
            }
                /* Navigationsheader .main Code */
                #Navigationsheader .main
                { width:89px; }
                /* Navigationsheader .clan Code */
                #Navigationsheader .clan
                { width:88px; }
                /* Navigationsheader .multimedia Code */
                #Navigationsheader .multimedia
                { width:140px; }
                /* Navigationsheader .contact Code */
                #Navigationsheader .contact
                { width:123px; }
                
                    /* Navigationsheader .main a Code */
                    #Navigationsheader .main a
                    { background-position:0 top; }
                    /* Navigationsheader .clan a Code */
                    #Navigationsheader .clan a
                    { background-position:-89px top; }
                    /* Navigationsheader .multimedia a Code */
                    #Navigationsheader .multimedia a
                    { background-position:-177px top; }    
                    /* Navigationsheader .contact a Code */
                    #Navigationsheader .contact a
                    { background-position:-317px top; }
                        
                    /* Navigationsheader .main a:hover Code */    
                    #Navigationsheader .main a:hover
                    { background-position:0 bottom; }
                    /* Navigationsheader .clan a:hover Code */
                    #Navigationsheader .clan a:hover
                    { background-position:-89px bottom; }
                    /* Navigationsheader .multimedia a:hover Code */
                    #Navigationsheader .multimedia a:hover
                    { background-position:-177px bottom; }
                    /* Navigationsheader .contact a:hover Code */
                    #Navigationsheader .contact a:hover
                    { background-position:-317px bottom; }
                
        
/* Rechts Code */
        #Rechts
        {
        background:transparent;
        width:584px;
        height:30px;
        float:right;
        }
        
            /* Contentheader Code */
            #Contentheader
            {
            background:url(../Pictures/Contentheader.png);
            width:518px;
            height:30px;
            float:left;
            clear:both;
            margin-left:66px;
            }


/* End of Box 2 */


/* Box 3 */
#Box3
{
width:1024px;
height:28px;
}
        #Links_
        {
        background:transparent;
        width:440px;
        height:28px;
        float:left;
        clear:both;
        }
            .navigationsinhalt
            {
            background:url(../Pictures/navigationinhalt.png);
            width:440px;
            height:20px;
            margin-top:8px;
            }
        
        
        #Rechts_
        {
        background:transparent;
        width:584px;
        height:28px;
        float:right;
        }
            .contentinhalt
            {
            background:url(../Pictures/Contentinhalt.png);
            width:513px;
            height:20px;
            margin-left:66px;
            }
            
            
.clear {
clear: both;
width: 100%;
}

lexip · 30.10.2011

AW: Problem mit Clear und Float

Guck mal ob das geht :

Lupina · 30.10.2011

leider hats nicht gebracht

da gabs auch mal Kommentare frueher..

LaFaSiLuc · 30.10.2011

AW: Problem mit Clear und Float

Ist es denn überhaupt angebracht, nach jedem div ein clear zu bauen, zudem du im div Wrapper ein clear:both hast und dann auch noch die Klasse clear mit clear:both öööhh.. clearst...

Lupina · 30.10.2011

AW: Problem mit Clear und Float

das habe ich schon probiert, nur leider hat das nicht viel gebracht..

... bleibt trotzdem so wie es auch jetzt ist.

LaFaSiLuc · 30.10.2011

AW: Problem mit Clear und Float

Versteh ich nicht ganz. Nimm doch mal alle clear dinger raus. Das hab ich so nämlihch noch nie gesehen, dass jeder div gecleart und tw. sogar doppelt gecleart wird. Und für den wrapper hast du ein Hintergrundbild? Gibts denn vielleicht einen Link, damit man das mal live sehen kann?

Lupina · 30.10.2011

AW: Problem mit Clear und Float

leider nicht ist alles local "noch".. habe alle clears rausgenommen und nur im Wrapper gelassen leider bringts nichts.

LaFaSiLuc · 30.10.2011

AW: Problem mit Clear und Float

Und warum im wrapper immer noch doppelt? Und wenn du jetzt die Anleitung, die bereits gepostet wurde, mal ausprobierst? Oder mal einen screenshot postest? Weil du ja scheinbar im wrapper nur ein Hintergrundbild hast, dass sich auch nirgendswohin wiederholt...

PS: Schau mal bei intensivstation.ch, da sind boxmodelle fertig aufgelistet. denn auch deine Großschreibung innerhalb vom html und CSS kann irgendwann Probleme machen

Lupina · 30.10.2011

AW: Problem mit Clear und Float

Code:

/* Main Stylesheet (c) 2011 by Media-Peine.de (prod. by Dominik Aljoscha Heirich */

/* Universal Selector */

*
{
margin:0 auto;
}

/* HTML Code */
html
{
height:100%;
font-family:Arial, Helvetica, sans-serif;
font-size:11px;
color:#000000;
}

/* Body Code */
body
{
width:100%;
height:100%;
min-height:100%;
background:url(../Pictures/Backgrounds/wallpaper3.png) no-repeat;
background-position:top;
background-attachment:fixed;
}



/* Wrapper */
#Wrapper
{
background:url(../Pictures/Backgroundbg.png);
width:1058px;
min-height:100%;
clear:both;
height:auto!important;
}


/* Box */
#Box
{
width:1024px;
height:148px;
}
        /* Header Code */
        #Headerbg
        {
        background:url(../Pictures/Header-BG.png);
        width:1024px;
        height:148px;
        }
            /* Header p Code */
            #Headerbg p
            {
            font-size:11px;
            padding-left:120px;
            padding-top:1px;
            }
                /* Socialnetwork Code */
                #socialnetwork
                {
                background:transparent!important;
                width:211px;
                height:auto;
                }
                    /* Socialnetworkinnen Code */
                    .socialnetworkinnen
                    {
                    width:211px;
                    height:auto;
                    padding-left:120px;
                    padding-top:70px;
                    }
                        /* Facebook Code */
                        .facebook
                        { background:url(../Pictures/icons/Facebook_32x32.png); width:32px; height:32px; float:left; }
                        /* Twitter Code */
                        .twitter
                        { background:url(../Pictures/icons/Twitter_32x32.png); width:32px; height:32px; float:left; }
                        /* Youtube Code */
                        .youtube
                        { background:url(../Pictures/icons/Youtube_32x32.png); width:32px; height:32px; float:left; }
                        /* Steam Code */
                        .steam
                        { background:url(../Pictures/icons/steam_32x32.png); width:32px; height:32px; float:left; }
            /* Latestnews Code */
            #latestnews
            {
            background:transparent;
            width:132px;
            margin-left:880px;
            }
                /* Latestnewsinhalt Code */
                .latestnewsinhalt { border-bottom:1px; border-color:#717171px; width:132px; height:12px;
                font-size:12px; color:#000000;  }
                
                
                /* End of Box 1 */
                
/* Box 2 */
#Box2
{
width:1024px;
height:30px;
margin-top:50px;
}    
        /* Links Code */
        #Links
        {
        background:transparent;
        width:440px;
        height:30px;
        float:left;
        clear:both
        }
        
            /* Navigationsheader Code */
            #Navigationsheader 
            {
            text-indent:-99999999999px;
            }
            /* Navigationsheader a Code */
            #Navigationsheader a
            {
            background:url(../Pictures/navigationheader.png) top center no-repeat;
            height:32px;
            display:block;
            text-decoration:none;
            }
            /* Navigationsheader li Code */
            #Navigationsheader li
            {
            float:left;
            list-style-type:none;
            }
                /* Navigationsheader .main Code */
                #Navigationsheader .main
                { width:89px; }
                /* Navigationsheader .clan Code */
                #Navigationsheader .clan
                { width:88px; }
                /* Navigationsheader .multimedia Code */
                #Navigationsheader .multimedia
                { width:140px; }
                /* Navigationsheader .contact Code */
                #Navigationsheader .contact
                { width:123px; }
                
                    /* Navigationsheader .main a Code */
                    #Navigationsheader .main a
                    { background-position:0 top; }
                    /* Navigationsheader .clan a Code */
                    #Navigationsheader .clan a
                    { background-position:-89px top; }
                    /* Navigationsheader .multimedia a Code */
                    #Navigationsheader .multimedia a
                    { background-position:-177px top; }    
                    /* Navigationsheader .contact a Code */
                    #Navigationsheader .contact a
                    { background-position:-317px top; }
                        
                    /* Navigationsheader .main a:hover Code */    
                    #Navigationsheader .main a:hover
                    { background-position:0 bottom; }
                    /* Navigationsheader .clan a:hover Code */
                    #Navigationsheader .clan a:hover
                    { background-position:-89px bottom; }
                    /* Navigationsheader .multimedia a:hover Code */
                    #Navigationsheader .multimedia a:hover
                    { background-position:-177px bottom; }
                    /* Navigationsheader .contact a:hover Code */
                    #Navigationsheader .contact a:hover
                    { background-position:-317px bottom; }
                
        
/* Rechts Code */
        #Rechts
        {
        background:transparent;
        width:584px;
        height:30px;
        float:right;
        }
        
            /* Contentheader Code */
            #Contentheader
            {
            background:url(../Pictures/Contentheader.png);
            width:518px;
            height:30px;
            float:left;
            clear:both;
            margin-left:66px;
            }


/* End of Box 2 */


/* Box 3 */
#Box3
{
width:1024px;
height:28px;
}
        #Links_
        {
        background:transparent;
        width:440px;
        height:28px;
        float:left;
        clear:both;
        }
            .navigationsinhalt
            {
            background:url(../Pictures/navigationinhalt.png);
            width:440px;
            height:20px;
            margin-top:8px;
            }
        
        
        #Rechts_
        {
        background:transparent;
        width:584px;
        height:28px;
        float:right;
        }
            .contentinhalt
            {
            background:white 30%:
            width:513px;
            height:auto;
            margin-left:71px;
            }
            
            
.clear {
clear: both;
width: 100%;
}

Code:

<div id="Wrapper" class="clear">

<div id="Box">
    <div id="Headerbg">
        <div id="socialnetwork">
            <div class="socialnetworkinnen">
                <div class="facebook"></div> <!-- End of Facebook -->
                <div class="twitter"></div> <!-- End of Twitter -->
                <div class="youtube"></div> <!-- End of Youtube -->
                <div class="steam"></div> <!-- End of Steam -->
            </div> <!-- End of Socialnetworkinnen -->
        </div> <!-- End of Socialnetwork -->
        <div id="latestnews">
                <div class="latestnewsinhalt">
                Platzhalter<br />
                </div> <!-- End of Latestnewsinhalt -->
        </div> <!-- End of Latestnews -->
    </div> <!-- End of Headerbg -->
</div> <!-- End of Box -->

<div id="Box2">

    <div id="Links">
        <div id="Navigationsheader">
            <li class="main"><a href="#"></a></li>
            <li class="clan"><a href="#"></a></li>
            <li class="multimedia"><a href="#"></a></li>
            <li class="contact"><a href="#"></a></li>
        </div> <!-- End of Navigationsheader -->
        
    </div> <!-- End of Links -->
    
    <div id="Rechts">
        <div id="Contentheader">
        </div> <!-- End of Contentheader -->
    </div> <!-- End of Rechts -->
</div> <!-- End of Box2 -->

<div id="Box3">

    <div id="Links_">
        <div class="navigationsinhalt">
        Platzhalter<br />
        </div> <!-- End of Navigationsinhalt -->
    </div> <!-- End of Links_ -->
    
    <div id="Rechts_">
        <div class="contentinhalt">    

            Ja was ist das denn fuer ein Test? :)
    <br />
                Ja was ist das denn fuer ein Test? :)
    <br />
                Ja was ist das denn fuer ein Test? :)
    <br />
                Ja was ist das denn fuer ein Test? :)
    <br />
                Ja was ist das denn fuer ein Test? :)
    <br />
                Ja was ist das denn fuer ein Test? :)
    <br />
                Ja was ist das denn fuer ein Test? :)
    <br />
    
            Ja was ist das denn fuer ein Test? :)
    <br />
                Ja was ist das denn fuer ein Test? :)
    <br />
                Ja was ist das denn fuer ein Test? :)
    <br />
                Ja was ist das denn fuer ein Test? :)
    <br />
                Ja was ist das denn fuer ein Test? :)
    <br />
                Ja was ist das denn fuer ein Test? :)
    <br />
                Ja was ist das denn fuer ein Test? :)
    <br />
    
            Ja was ist das denn fuer ein Test? :)
    <br />
                Ja was ist das denn fuer ein Test? :)
    <br />
                Ja was ist das denn fuer ein Test? :)
    <br />
                Ja was ist das denn fuer ein Test? :)
    <br />
                Ja was ist das denn fuer ein Test? :)
    <br />
                Ja was ist das denn fuer ein Test? :)
    <br />
                Ja was ist das denn fuer ein Test? :)
    <br />
    
            Ja was ist das denn fuer ein Test? :)
    <br />
                Ja was ist das denn fuer ein Test? :)
    <br />
                Ja was ist das denn fuer ein Test? :)
    <br />
                Ja was ist das denn fuer ein Test? :)
    <br />
                Ja was ist das denn fuer ein Test? :)
    <br />
                Ja was ist das denn fuer ein Test? :)
    <br />
                Ja was ist das denn fuer ein Test? :)
    <br />
                Ja was ist das denn fuer ein Test? :)
    <br />
                Ja was ist das denn fuer ein Test? :)
    <br />
                Ja was ist das denn fuer ein Test? :)
    <br />
                Ja was ist das denn fuer ein Test? :)
    <br />
                Ja was ist das denn fuer ein Test? :)
    <br />
                Ja was ist das denn fuer ein Test? :)
    <br />
                Ja was ist das denn fuer ein Test? :)
                            Ja was ist das denn fuer ein Test? :)
    <br />
                Ja was ist das denn fuer ein Test? :)
    <br />
                Ja was ist das denn fuer ein Test? :)
    <br />
                Ja was ist das denn fuer ein Test? :)
    <br />
                Ja was ist das denn fuer ein Test? :)
    <br />
                Ja was ist das denn fuer ein Test? :)
    <br />
                Ja was ist das denn fuer ein Test? :)
        </div> <!-- End of Contentinhalt -->
    </div> <!-- End of Rechts_ -->
</div> <!-- End of Box3 -->

</div> <!-- End of Wrapper -->
</body>
</html>

LaFaSiLuc · 31.10.2011

AW: Problem mit Clear und Float

so, ok, und wie SOLL es aussehen? Das ist mir überhaupt nicht klar...

Lupina · 31.10.2011

AW: Problem mit Clear und Float

wie es aussehen soll ist doch eigentlich ersichtlich ? ... Es sollen die beiden Seitenbalken mit nachunten Wachsen und das ist wie du warscheinlich, richtig vermutest, der Background vom Wrapper.

LaFaSiLuc · 01.11.2011

AW: Problem mit Clear und Float

Also ich finde, es ist überhaupt nicht ersichtlich, denn ich sehe keine 2 Seitenbalken. Vielleicht solltest du das gesamte Design nochmal von vorne überdenken. Wie gesagt ich kann dir intensivstation.ch ans Herz legen, da sind viele Layouts (natürlich ohne Grafiken etc.) mit bereits fertigem HTML und CSS. Wenn du das dann an deine Wünsche anpasst, kann nicht viel schief gehen...

lexip · 01.11.2011

AW: Problem mit Clear und Float

In Deiner css zum #Wrapper fehlt ein Leerzeichen in der height-Definition zwischen "auto" und "important".
height: auto !important;

Na ja, so wie es halt da steht:

Mit der Technik dort bekommst Du schon den Wrapper auf 100% Höhe- ich habs ausprobiert!