Home/ Questions/Q 7733701
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-01T07:04:10+00:00

Using the code below I’m expecting a green rectangle and a red one of

  • 0

Using the code below I’m expecting a green rectangle and a red one of the same size. But instead, the red is half the size of the green

Any suggestion how to make it the same size?

<html>
  <head>
    <style type="text/css"> 
      #menu ul{list-style:none;}   
      #menu ul li{float:left;width:103px;height:43px;border:5px solid green;}
      #menu ul li #menu1 {border:solid 2px red;}
    </style>
  </head>

  <body>
    <div id="menu">
      <ul>
        <li><div id="menu1"><a href="#">1 </a></div></li>
      </ul>
    </div>
  </body>
</html>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Here is the css I used.

    #menu ul{list-style:none;}
    #menu ul li{float:left; width:103px; height:43px;
    border:5px solid green; position:relative; padding:0 0 3px 0 ;}
    #menu ul li #menu1 { border:solid 2px red; height:100%; }​

    Notice the first thing is the addition of the height:100%; but also because of the border. I also added a padding of half the size to the bottom of the wrapper. If you remove that you will see better.

    DEMO

    • 0