Probleem div met float en border

**Jeroen Bourdeaud'hui** · 29-05-2007, 12:34

Hallo,

ik heb een probleempje met mijn css
Ik heb een grote container met een border.
Hierin heb ik 2divs die ik een float left meegeef

Het probleem is dat de border van de grote container stopt doordat ik float left meegeef.

Bestaat er een oplossing om dit tegen te gaan?

http://www.gigadesign.be/multi_kolom_3.html
aanpassen naar

Code:

 #container {
    margin : 20px auto;
    width : 750px;
    font-size : 1.3em;
        border-style: solid;
        border-width: 1px;
        border-color: #000000;
}

dan zie je bovenaan een lijntje
dit mag niet en moet doorlopen.
Dit gebeurt enkel in IE.

Alvast bedankt en hopelijk kan iemand helpen

**Joeri P** · 29-05-2007, 14:05

Origineel gepost door Jeroen Bourdeaud'hui

Hierin heb ik 2divs die ik een float left meegeef

Ik zie er 3 hoor, of kijk ik verkeerd.

Verder van de rest ziet dat er hier met FF1.5 en IE6 perfect uit

**Jeroen Bourdeaud'hui** · 29-05-2007, 14:38

er staat dan ook aanpassen naar
dit is een versie waarin geen border staat :s

http://users.skynet.be/fa041866/multikolom.html

even zelf aangemaakt

denk dat je het wel snapt als je code ziet
en wat ik verwacht :)

**Joeri P** · 29-05-2007, 14:47

ah ok

Ge moet na uw laatste float left div, een clear both doen. Dan komt dat in FF in orde.

Dus zo :

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="nl" >
 <head>
  <title>3 kolommen layout</title>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  <style type="text/css">
#container {
 margin : 20px auto;
 width : 780px;
 font-size : 1.3em;
 border-color:#FF0000;
 border-style:solid;
 border-width:1px;
}
.kolom1, .kolom2, .kolom3 {
 float : left;
 width : 235px;
 margin : 5px;
}
.clear {
 clear: both;
}

</style>
</head>
 <body>
  <div id="container">
   <div>
    hier geen float
   </div>
   <div class="kolom1">
   test1<br />
   test1<br />
   test1<br />
   test1<br />
   test1<br />
   test1<br />
   </div>
   <div class="kolom2">
   test2<br />
   test2<br />
   test2<br />
   test2<br />
   test2<br />
   test2<br />
   test2<br />
   </div> 
   <div class="clear"></div> 
  </div>
 </body>
</html>

**Jeroen Bourdeaud'hui** · 29-05-2007, 15:00

thx
zo werkt het :)

in flock gaat het nu ook -> zelfde engine als FF

Probleem div met float en border