Home/ Questions/Q 8560725
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-11T16:20:33+00:00

There are already many questions raised about CSS & remaining width. After reading them

  • 0

There are already many questions raised about CSS & remaining width. After reading them I still have a problem I cannot fix. When trying to let an input element use up the remaining width it is always 4px wider than its containing div.

<!DOCTYPE html>
<html>
<body>
    <div>
        <div style='float:left; margin-right:10px;'>Hello:</div>
        <div style='overflow:hidden'><input style='width:100%'/></div>
    </div>
</body>
</html>

The input element is always 4 pixels too wide to show its right border. If I set the margin-left of the input to -4px it becomes visible but then the left border is not shown.

Tested this with Chrome.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    You could add box-sizing: border-box; to your input to avoid the overflow. What it does basically is that the borders and padding will be taken into consideration when setting width: 100%. Note that you’d have to include several vendor-prefixed for different browsers:

    .myinput {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    border: 2px solid orange; /*just to make border more clear*/
    width: 100%;
}

    Little demo: little link.

    • 0