asked on

Trying to understand 100% width

Im trying to understand why, when I set an the input width to 100% it overflows the textbox:-

Ive put it on jsFiddle to show you my simple code - https://jsfiddle.net/ug1p85qf/

Im know I can customise the width (in my example 300px), but I wanted to understand why it overflows.

Can someone explain why I get this issue please?

Thank you in advance

ste5an

Elements may have (inherited) defaults for margin and padding. Thus I normally use a catcher to remove these:

* { margin: 0 0 0 0; padding: 0 0 0 0; }

Open in new window

But you really need to enforce the textbox to be in the parent to override its width calculation using box-sizing:

#txt1 {
  margin-top:30px;
  width:100%;
  box-sizing: border-box;
}

Open in new window

Scott Fell

You might just add to the top of your css
https://www.paulirish.com/2012/box-sizing-border-box-ftw/

It is essentially what ste5an has shown you above put differently.

I would just question why you have absolute positioning in your form though unless you are not making this responsive.

lenamtl

Hi,
you can use Boostrap to set your form and web site responsive
https://getbootstrap.com/docs/5.0/forms/form-control/

This question needs an answer!

Become an EE member today

7 DAY FREE TRIAL

Members can start a 7-Day Free trial then enjoy unlimited access to the platform.

View membership options

Learn why we charge membership fees

We get it - no one likes a content blocker. Take one extra minute and find out why we block content.