Skip to content
View in the app

A better way to browse. Learn more.

Web Designer Forum

A full-screen app on your home screen with push notifications, badges and more.

To install this app on iOS and iPadOS
  1. Tap the Share icon in Safari
  2. Scroll the menu and tap Add to Home Screen.
  3. Tap Add in the top-right corner.
To install this app on Android
  1. Tap the 3-dot menu (⋮) in the top-right corner of the browser.
  2. Tap Add to Home screen or Install app.
  3. Confirm by tapping Install.

Difference between width in px and %.

Featured Replies

I am trying to get to grips with dividers and how their widths work. I have done a lot reading on this so I don't really have a question I just want some clarification if that's ok.

 

Lets say for example a screen size is of 1000px and I create a div of 900px, does this mean there will be white space of 100px from the end of the div to the browser?

 

Going off the same example if I was to centre the div of 900px within the browser/window of 1000px does this mean there will be white space of 50px on either side of the div?

 

Again using the 1000px screen size as the example, if I was to create a div, lets say called "container", and I set the width to 90% does that mean there will be 5% of white space on either side of the div to the browser/window? If I was to contract the window so it would now be say for example 800px does that mean there will still be 5% of white space from either side of the div to the browser/window?

 

I would really appreciate any answers, thanks very much.

I am trying to get to grips with dividers and how their widths work. I have done a lot reading on this so I don't really have a question I just want some clarification if that's ok.

 

Lets say for example a screen size is of 1000px and I create a div of 900px, does this mean there will be white space of 100px from the end of the div to the browser?

 

Yes.

 

Going off the same example if I was to centre the div of 900px within the browser/window of 1000px does this mean there will be white space of 50px on either side of the div.

 

Yes.

 

Again using the 1000px screen size as the example, if I was to create a div, lets say called "container", and I set the width to 90% does that mean there will be 5% of white space on either side of the div to the browser/window? If I was to contract the window so it would now be say for example 800px does that mean there will still be 5% of white space from either side of the div to the browser/window?

 

Yes and yes.

Yes to all. Unless you have borders or padding on your elements. Borders and padding will be added to the elements actual with and height unless you have specified a box-sizing property with a value of "border-box".

Yes to all. Unless you have borders or padding on your elements. Borders and padding will be added to the elements actual with and height unless you have specified a box-sizing property with a value of "border-box".

 

And you should always have your box-sizing set to border-box. It's much more intuitive and sensible than content-box model. In the rare use case that you want an element rendered in content box you can just specify content-box for that particular element group.

  • 2 weeks later...

The "px and %" is more are less same.

 

When we are giving the value as "px", its not give proper responsive while redirecying the site into mobile view.

 

But we are giving the "%" value, its given proper responsive.

The "px and %" is more are less same.

 

When we are giving the value as "px", its not give proper responsive while redirecying the site into mobile view.

 

But we are giving the "%" value, its given proper responsive.

Aside from the fact this post is now almost a month old, what you have said is wrong, the others have explained it to the op already

  • 2 weeks later...

width:100px;is denote the pixel size of total display pixel size(1024x760)

width:100% is denote the pixel size in presentage.

Create an account or sign in to comment

Account

Navigation

Search

Search

Configure browser push notifications

Chrome (Android)
  1. Tap the lock icon next to the address bar.
  2. Tap Permissions → Notifications.
  3. Adjust your preference.
Chrome (Desktop)
  1. Click the padlock icon in the address bar.
  2. Select Site settings.
  3. Find Notifications and adjust your preference.