What is the best size to set your webpage during design?

When designing your webpages, what is the best width to set your webpages to make them span well across multiple monitors without a horizontal scroll bar or the need for a horizontal scroll bar?

It’s going to vary per media device depending on your layout scheme. You could theoretically do one layout that works for all, but it might be a bit limiting. I find it best to just use media queries and tackle each problem individually (and re-factor it afterwards).

1 Like

Okay! Thank you. I understand that media query is used to target various devices, say, mobile, tablet and PC, but this is not particularly about targeting devices now.

I just want to know if there’s a one-size-fits-all width that I can set my body element in my HTML or a width that I can set my main container div, to make it display without showing a horizontal scroll bar on any laptop monitor.

You could try using percentages and see if you like it.


Okay! This sounds positive.

Do you mean I should set the width of the body element or the main div container in percentages of what?

Percentages with respect to what, should I consider?

Per the MDN web docs

The <percentage> CSS data type represents a percentage value. It is often used to define a size as relative to an element’s parent object. Numerous properties can use percentages, such as width , height , margin , padding , and font-size .

1 Like

Okay! Good.

In other words, I can just say something like

#main-container-div {
width: 100%;


body {
width: 100%;

Would that be it?

Correct, though setting body to width: 100% seems superfluous:

the built-in offset from the edge of the page is applied through a margin on the body element


So a better way to tackle that problem might be:


Many thanks. I think it now makes more sense.

Thanks again.

1 Like