Home/ Questions/Q 7783859
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-01T19:57:55+00:00

i am trying to spread 4 items evenly across its parent container but for

  • 0

i am trying to spread 4 items evenly across its parent container but for some reason in ie7 the fourth item is pushed onto the next line. I don’t understand how that’s possible if I am specifying 25% width for each item. Here is my html/css:

<!doctype html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <style>
        html, body, ul, li { padding:0; margin:0; }
        ul { list-style:none outside none; }
        ul li { float:left; height:40px; width:25%; }
        ul li a { display:block; height:20px; padding-top:20px; text-align:center; }
    </style>
</head>
<body>
    <div style="overflow:hidden">
        <ul>
            <li><a href="a">A</a></li>
            <li><a href="b">B</a></li>
            <li><a href="c">C</a></li>
            <li><a href="d">D</a></li>
        </ul>
    </div>
</body>
</html>

Seems to work fine in other browsers, but not ie7.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    See this question. Basically IE rounds up when you use percentage widths so it’s possible to go over 100% where it will just bump your last item down. So to fix that you should either use 24% instead of 25% or just figure the right px width.

    It’s a bit lot less nice but you could change your code like so:

    CSS

     ul { list-style:none; position:relative; }
 li { position:absolute; top:0; height:40px; width:25%;}
 li.two {left:25%;}
 li.three {left:50%;}
 li.four {left:75%;}

    HTML

    <div> <!-- removed the overflow:hidden -->
    <ul>
        <li><a href="a">A</a></li>
        <li class="two"><a href="b">B</a></li>
        <li class="three"><a href="c">C</a></li>
        <li class="four"><a href="d">D</a></li>
    </ul>
</div>

    which works for me in IE7 and Chrome

    • 0