How to set max width for a web page

[larry29936]

I want to set a max width for all pages on a web site but have no idea where to set it in the CSS file. I tried setting it in both the body section and the html section without success. I'd appreciate some help on this.

Thanks in advance.

[Dani]

Set it on a <div> container inside the body tag.

[larry29936]

I should have told you why I'm trying to do this. I'm trying to eliminate the horizontal scroll bar since none of the pages exceed screen width on my laptop or desktop.

[Dani]

Can you please provide a link to the page so I can see what's happening and what isn't working as expected? There shouldn't be a horizontal scrollbar unless it's needed, or you have CSS that explicitly says to always show it.

[UWInsure]

Have you considered Bootstrap 5? Just have the library on and most will be taken care off. For those who hate bootstrap, please ignore my message. lol.

[john_111]

Inside the body tag, set up a div with the name main to contain all your content. Like this <div id="main"> </div>
Then in your css file set the width of that div to, say, max-width: xxxxpx; where xxxx is the maximum width you think you will need. Typically set it to between 1000px to 1200px or even 1500px. Very wide lines of text are harder to read, as your eye struggles to find the beginning of the next line, so longer than this is not beneficial.
The div will then expand or contract to fit the browser window, up to the limit you set.

But I suggest you try reading up on CSS, as this is a very very basic first step in setting up any website. So you would find the bootstrap suggestion earlier just totally beyond your expertise.

[1Truth]

Right now I'm on my phone, but from the top of my head I would suggest the use of the hero div container.

<div class="container hero">
  <!-- Your HTML elements and stuff-->
<div>

I do believe there is a bootstrap for that but I'll edit when I get back.

[Biiim]

This should be what you are looking for:

<div style='overflow-x:hidden;max-width:800px;'></div>

Use bootstrap if it's not too complicated for you to get it set up. Bootstrap is very good Bootstrap 5 Columns
Bootstrap makes it responsive and is fully mobile compatible, so they stretch to fit the screen size and you can even alter the structure based on the size of the screen. I use Bootstrap for all my UI's now

<div class="container">
  <div class="row align-items-start">
    <div class="col-sm-6 col-md-4 col-3">
      2 columns small | 3 columns mid | 4 columns big
    </div>
    <div class="col-sm-6 col-md-4 col-3">
      2 columns small | 3 columns mid | 4 columns big
    </div>
    <div class="col-sm-6 col-md-4 col-3">
      2 columns small | 3 columns mid | 4 columns big
    </div>
    <div class="col-sm-6 col-md-4 col-3">
      2 columns small | 3 columns mid | 4 columns big
    </div>
  </div>
</div>

[Sakshi_12]

we are going to add the max-width and margin code to the .header-container, .body-container, and .footer-container for max-width

CSS

.header-container, .body-container, .footer-container { 
    max-width: 1080px; 
    margin: 0 auto; 
}

[dark404]

CSS height and width Examples
Set the height and width of a <div> element: div { height: 200px; width: 50%; ...
Set the height and width of another <div> element: div { height: 100px; width: 500px; ...
This <div> element has a height of 100 pixels and a max-width of 500 pixels: div { max-width: 500px; height: 100px;

[mtyide]

Hi. I hope this link helps if not already answered:

https://www.freecodecamp.org/news/html-page-width-height/

Good luck...