Floating lists

hey,

I’m floating 3 div’s with ul inside of them. The problem is I lose the list-style type(bullets) of the first div when floating. Is there a way to fix this?


<div id="regels">
<div class="float">
	<ul>
		<li>geen huisdieren</li>
		<li>roken verboden</li>
		<li>Borg 500€ (verplicht)</li>
		<li>Eindschoonmaak 92€<br />(verplicht)</li>
	</ul>
</div>
<div id="kolom2" class="float">
	<ul>
		<li>Bedlinnen 9,4€ pp (optie)</li>
		<li>Badlinnen 5,2€ pp (optie)</li>
		<li>Milieutaks + 1 vuilzak (inbegrepen)</li>
		<li>Keukenhanddoeken (inbegrepen)</li>
	</ul>
</div>
<div id="kolom3" class="float">
	<ul>
		<li>Bedlinnen 9,4€ pp (optie)</li>
		<li>Badlinnen 5,2€ pp (optie)</li>
		<li>Milieutaks + 1 vuilzak (inbegrepen)</li>
		<li>Keukenhanddoeken (inbegrepen)</li>
	</ul>
</div>
</div>


div#regels{
	margin:10px 0 0 5px;
	overflow:hidden;
}

div.float{
 float:left;
}	

div#kolom2{
	margin: 0 0 0 65px;
}

thanks

Hi,
It’s because your first div does not have a left margin on it. The bullets are there, they are just hiding to the left.

You really don’t even need to nest the ULs in divs, you can just float the ULs.

It will be best to reset the default margins and paddings on the UL since browsers apply them differently.

EDIT:
Actually, when I run the code you posted I do get bullets on all three ULs. I am guessing you already reset the UL margin/padding to zero which will show the bullets missing on the first list.

Try this:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
 "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1250">
<title>Test Page</title>

<style type="text/css">
#regels {
    margin:10px 0 0 5px;
    overflow:hidden;
}
#regels ul {
    float:left;
    margin:0;
    [COLOR=Blue]padding:0 0 0 30px[/COLOR]
}    
</style>

</head>
<body>
<div id="regels">
    <ul>
        <li>geen huisdieren</li>
        <li>roken verboden</li>
        <li>Borg 500&#8364; (verplicht)</li>
        <li>Eindschoonmaak 92&#8364;<br />(verplicht)</li>
    </ul>
    <ul>
        <li>Bedlinnen 9,4&#8364; pp (optie)</li>
        <li>Badlinnen 5,2&#8364; pp (optie)</li>
        <li>Milieutaks + 1 vuilzak (inbegrepen)</li>
        <li>Keukenhanddoeken (inbegrepen)</li>
    </ul>
    <ul>
        <li>Bedlinnen 9,4&#8364; pp (optie)</li>
        <li>Badlinnen 5,2&#8364; pp (optie)</li>
        <li>Milieutaks + 1 vuilzak (inbegrepen)</li>
        <li>Keukenhanddoeken (inbegrepen)</li>
    </ul>
</div>
</body>
</html>

Thanks!