Problem mit Clear und Float

Lupina

Lupina

Grünschnabel
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%;
 
Zuletzt bearbeitet von einem Moderator:
Ich bin mir da überhaupt nicht sicher und habe auch nichts getestet, aber sollte in #Rechts nicht auch ein clear stehen? Ausserdem würde ich [der Vollständigkeit halber] um die <li> Tags eine <ul> definieren..
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück