Div gaat niet mee

**Jeroen Kamphuis** · 07-10-2008, 19:20

Beste,

Ik ben bezig met een pagina en heb de volgende codes:

HTML:

Code:

        <div id="clt">
        
            <div id="tekst1">
                <div id="tekst1kop"></div>
                <div id="tekst1c">
                </div>
                <div id="tekst1f"></div>
            </div> 
                   
        </div>

CSS:

Code:

#clt
    {
        width: 774px;        
    }

#tekst1
    {
        float:left;
        width: 370px;
        margin-left: 8px;
    }

#tekst1kop
    {
        background: url(images/cblauwkop.jpg) no-repeat;
        width: 371px; 
        height: 41px;
    }



#tekst1c
    {
        background: url(images/cblauwbg.jpg);
        width: 360px;
        color: #000;
        padding-left: 10px;
        padding-top: 4px;
        padding-bottom: 2px;
    }

#tekst1f
    {
        width: 370px;
        height:2px;
        background: url(images/cblauwfoot.jpg);        
    }

Als ik deze codes laadt in IE dan gaat de clt mee in grootte van tekst1, maar in FF gaat hij niet mee met de grootte van tekst1. Weet iemand hoe dit kan?

MVG,

Jeroen Kamphuis

**I. van Zon** · 07-10-2008, 19:25

na je laatst gefloate div even <br style="clear:both" /> toevoegen

**Jeroen Kamphuis** · 07-10-2008, 19:26

in de html? waar precies? Werkte niet dat is niet wat ik bedoel. Wat ik nodig heb is dit:

Mijn content bestaat uit 3 lagen:

clt: content laag top
clm: content laag midden
clb: content laag bottom

deze lagen staan in de container.

zodra ik in mijn "clt" een paar div's maak gaat de clt niet mee in de grootte daarvan, waardoor de content div dit ook niet gaat en deze niet de witte achtergrond meeneemt. In IE werkt dit, maar in FF werkt dit niet. Hoe kan dit?

MVG,

Jeroen Kamphuis

**Rob v B** · 07-10-2008, 19:43

Kun je niet de clt hoogte onbepaald laten?

**Jeroen Kamphuis** · 07-10-2008, 19:47

Ik heb clt hoogte onbepaald en dan doet hij niks. Alleen in ie hier voorbeeld:

http://www.freewebs.com/gehackte/gt

help alstublieft ik kom er niet uit.

**gast7972** · 07-10-2008, 20:10

HTML

Code:

<div id="content">
         <div id="clt">
                <div id="tekst1">
                </div>
         </div>
         <div id="clm">
         </div>
         <div id="clb">
         </div>
</div>

CSS

Code:

#content {
margin:0 auto;
}

#clt {
float:left;
}

#tekst1 {
float:left;
}

Zo zou hij volgens mij al moeten werken ;), anders hoor ik het wel.

Mvg,
Stijn Zanders
Aixo.nl
[email address]

**Jeroen Kamphuis** · 07-10-2008, 20:19

Dit is de hele pagina code:

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>Voetbal Toto</title>
<link rel="stylesheet" type="text/css" href="css.css" />
<!--[if IE]>
<link rel="stylesheet" type="text/css" href="cssie.css" />
<![endif]-->

</head>

<body>

<div id="container">

    <div id="header">
    
        <div id="hbanner"><img alt="bannerboven" src="images/advertentie.jpg" /></div>
        
        <div class="nav">
        <ul>
        <li><a href="#">Voorpagina</a></li> 
        <li><a href="#">Kennisvragen</a></li> 
        <li><a href="#">Spelregels</a></li> 
        <li><a href="#">Speelschema</a></li> 
        <li><a href="#">Prijzen</a></li> 
        <li><a href="#">Linkpartners</a></li> 
        <li><a href="#">Disclaimer</a></li> 
        <li><a href="#">Contact</a></li> 
        </ul>
        </div>
        
        <div id="rss"><a href="#"><img border="0" src="images/rss.png" alt="rss feed" /></a></div>
    
    </div>
<div id="menucontainer">   
  <div id="mboven"></div>
  <div id="menu">
    
        <div id="groentop"><span class="bold">Registreren</span></div>
        <div class="groen">
        <ul>
        <li class="even"><span class="plus">+</span> <a href="#">Aanmelden</a></li>
        <li class="oneven"><span class="plus">+</span> <a href="#">Inloggen</a></li>
        </ul>
        </div>
           <div id="groenonder"></div>
        
        <div id="menuban"><a href="#"><img src="images/inschrijven.jpg" alt="inschrijven" border="0" /></a></div>
        
        <div id="bruintop"><span class="bold">Leden menu</span></div>
        <div class="bruin">
        <ul>
        <li class="even"><a href="#">Voorpagina leden</a></li> 
        <li class="oneven"><a href="#">Mijn wedstrijden</a></li>
        <li class="even"><a href="#">Toto invullen</a></li>
        <li class="oneven"><a href="#">Toto wijzigen</a></li>
        <li class="even"><a href="#">Mijn score</a></li>
        <li class="oneven"><a href="#">Totale stand</a></li>
        <li class="even"><a href="#">Inschrijven subcompetitie</a></li>
        <li class="oneven"><a href="#">Eigen subcompetitie</a></li>
        </ul>
        </div>
        <div id="bruininftop"></div>
        <div id="bruinonder">
<span>Score in totaalklassement: 0<br />
Plaats in totaalklassement: 56<Br /><br />

<span class="bold">Periode 3</span><br />
Score in huidige periode: <br />
Plaats in huidige periode: 1 <br />
</span>
        </div>
        <div id="bruininfbot"></div>
    
    
    </div>
    <div id="monder"></div>
</div>

<div id="contentc">

    <div id="contenttop"></div>
    
    <div id="content">
    
        <div id="clt">
        
            <div id="tekst1">
            
                <div id="tekst1kop"></div>
                <div id="tekst1c">
                Welkom op gratistoto.nl! Voorspel de uitslagen van de <br /><br />
                wedstrijden op het EK 2008 en maak GRATIS kans op <Br /><br />
                prijzen! De hoofdprijs is een XBOX 360, maar er zijn <br /><br />
                tevens leuke andere prijzen. Zie voorwaarden
                </div>
                <div id="tekst1f"></div>
            
            </div>
            
            <div id="login"></div>
        
        </div>
       
    </div>

</div>


</div>

</body>
</html>

css:

Code:

@charset "utf-8";
/* CSS Document */

body
    {
        width: 1052px;
        margin: 0 auto;
        background: url(images/BG.jpg) center top repeat-x #72a314;
        text-align: center;
        font-family: Verdana;
        font-size: 11px;
        color: #FFF;
    }

#container
    {
        width: 1052px;
        height: 901px;
        text-align: left;
    }

#header
    {
        width: 1052px;
        height: 146px;
        background-image: url(images/Header.png);
    }

#hbanner
    {
        width: 481px;
        height: 75px;
        padding-top: 19px;
        padding-left: 571px;
    }

.nav
    {
        width: 986px;
        height: 52px;
        font-family: Verdana, Arial, Helvetica, sans-serif;
        font-size: 11px;
        color: #FFFFFF;
        float:left;
    }


.nav ul
    {
        list-style: none;
        margin: 12px 0 0 250px;
        
    }

.nav li
    {
        padding-left: 25px;
        padding-top: 5px;
        float: left;
        text-align: center;
    }

.nav li a:active { text-decoration: none; color: #FFFFFF}
.nav li a:link { text-decoration: none; color: #FFFFFF;}
.nav li a:visited { text-decoration: none; color: #FFFFFF;}
.nav li a:hover { text-decoration: underline; color: #FFFFFF;}
        
#rss
    {
        width: 46px;
        height: 51px;
        float:left;
        padding-left: 20px;
        padding-top: 1px;
    }

#menucontainer
    {
        float:left;
        margin-top: 8px;
    }

#mboven{background-image: url(images/menu_boven.png); width: 225px; height: 9px; margin-left: 39px;}

#menu
    {
        width: 225px;
        margin-left: 39px;
        background: #FFFFFF;
        padding-bottom: 10px;
    }
    
#groentop
    {
        background: url(images/groenmenu.jpg) no-repeat;
        width: 192px;
        height: 29px;
        margin-left:8px;
        padding-left: 20px;
        padding-top: 12px;
    }

.groen
    {
        width: 212px;
        margin-left: 8px;
        background: url(images/groenmenuul.jpg) repeat-y;            
    }
    
.groen ul 
    {
        margin: 0px;
        background: none;
        list-style: none;    
        width: 209px;
        padding-left: 2px;
    }

.groen li
     {
        padding-left: 10px;
        padding-top: 3px;
        height: 17px;    
        width: 197px;
        color: #475a04;
        font-weight: bold;
    }

.groen li.even 
    {
        background-color: #bdd95e;
    }

.groen li.oneven     
    {
        background-color: #dff592;
    }
    
.groen li a:active { color: #475a04; text-decoration: none; }
.groen li a:link { color: #475a04; text-decoration: none; }
.groen li a:hover { color: #475a04; text-decoration: none; }
.groen li a:visited { color: #475a04; text-decoration: none; }

.plus
    {
        font-size: 9px;
        font-weight: normal;
    }

#groenonder
    {
        background: url(images/groenmenuinf.jpg) no-repeat;
        width: 212px;
        height: 40px;
        margin-left: 8px;
    }
    
#menuban
    {
        background-image: url(images/inschrijven.jpg);
        width: 211px;
        height: 88px;
        margin-left: 8px;
        margin-top: 8px;
    }

#bruintop
    {
        background: url(images/bruinmenu.jpg) no-repeat;
        width: 192px;
        height: 29px;
        margin-left: 8px;
        margin-top: 8px;
        padding-left: 20px;
        padding-top: 12px;
    }        

.bruin
    {
        width: 212px;
        margin-left: 8px;
        color: #000;
        background: url(images/bruinmenuul.jpg) repeat-y;
    }
    
.bruin ul 
    {
        margin: 0px;
        background: none;
        list-style: none;    
        width: 212px;
        padding: 0px;
    }

.bruin li
     {
        padding-left: 10px;
        padding-top: 3px;
        height: 17px;    
        width: 197px;
        margin-left: 2px;
    }

.bruin li.even 
    {
        background: #cdad96;
    }

.bruin li.oneven     
    {
        background: #ebceb9;
    }

.bold
    {
        font-weight: bold;
    }

.bruin li a:active { color: #000; text-decoration: none; }
.bruin li a:link { color: #000; text-decoration: none; }
.bruin li a:hover { color: #000; text-decoration: none; }
.bruin li a:visited { color: #000; text-decoration: none; }

#bruininftop { margin-left: 8px; width: 212px; background:url(images/bruininftop.jpg) no-repeat; height: 5px;}
#bruininfbot { margin-left: 8px; width: 212px; background:url(images/bruininfbot.jpg) no-repeat; height: 3px;}

#bruinonder
    {        
        width: 202px;
        margin-left: 8px;
        background: url(images/bruininfbg.jpg) repeat-y;
        padding-left: 10px;
        color: #FFF;
    }

#monder{background-image:url(images/menu_onder.png); width: 225px; height: 9px; margin-left: 39px;}

#contentc
    {
        float:left;
        margin-top: 8px;    
    }

#contenttop
    {
        width: 775px;
        height: 9px;
        background: url(images/contenttop.jpg) no-repeat;
    }
        
#content
    {
        width: 774px;
        background: #FFF;
    }
    
#clt
    {
        width: 774px;    
        background: #FFFFFF;
    }

#tekst1
    {
        float:left;
        width: 370px;
        margin-left: 8px;
    }
    
#tekst1kop
    {
        background: url(images/cblauwkop.jpg) no-repeat;
        width: 371px; 
        height: 41px;
    }



#tekst1c
    {
        background: url(images/cblauwbg.jpg);
        width: 360px;
        color: #000;
        padding-left: 10px;
        padding-top: 4px;
        padding-bottom: 2px;
    }

#tekst1f
    {
        width: 370px;
        height:2px;
        background: url(images/cblauwfoot.jpg);        
    }

#login
    {
        background-image:url(images/login.jpg);
        width: 370px;
        height: 125px;
        float: left;
        margin-left: 13px;
    }

#clm
    {
        width: 774px;
        margin-left: 8px;        
    }

#tekst2
    {
    }

#tekst2kop
    {
        background: url(images/cblauwkop.jpg) no-repeat;
        width: 371px; 
        height: 40px;
        margin-top: 15px;
    }

#tekst2c
    {
        background: url(images/cblauwbg.jpg);
        width: 360px;
        color: #000;
        padding-left: 10px;
        padding-top: 4px;
        padding-bottom: 2px;
    }

#tekst2f
    {
        width: 370px;
        height:2px;
        background: url(images/cblauwfoot.jpg);        
    }

MVG,

Jeroen Kamphuis
Aanvullend bericht:
Besten,

Het is gelukt met dank aan Ivo van Zon. Hartstikke bedankt voor je hulp.

MVG,

Jeroen Kamphuis

Div gaat niet mee

Div gaat niet mee

Tags voor dit bericht

Quick links

Sitedeals

Andere media

Over Sitedeals