SitePoint Sponsor

User Tag List

Results 1 to 3 of 3

Thread: floating lists

  1. #1
    SitePoint Enthusiast
    Join Date
    Oct 2009
    Posts
    83
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    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?

    HTML Code:
    <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>
    Code:
    div#regels{
    	margin:10px 0 0 5px;
    	overflow:hidden;
    }
    
    div.float{
     float:left;
    }	
    
    div#kolom2{
    	margin: 0 0 0 65px;
    }
    thanks

  2. #2
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    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:

    Code:
    <!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;
        padding:0 0 0 30px
    }    
    </style>
    
    </head>
    <body>
    <div id="regels">
        <ul>
            <li>geen huisdieren</li>
            <li>roken verboden</li>
            <li>Borg 500€ (verplicht)</li>
            <li>Eindschoonmaak 92€<br />(verplicht)</li>
        </ul>
        <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>
        <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>
    </body>
    </html>

  3. #3
    SitePoint Enthusiast
    Join Date
    Oct 2009
    Posts
    83
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks!


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •