CSS- The ultimate guide to perfectly centering a webpage without the need for extra margins!

Question

CSS- The ultimate guide to perfectly centering a webpage without the need for extra margins!

Our SharePoint 2013 generated web page has a width of 1024. The main content div is styled as follows:

#container_master {
    width:1024px !important;
    margin-left: auto !important;
    margin-right: auto !important;  
    background-color:#FFF !important;
}

This works perfectly on resolutions above 1024. However, when someone sets their resolution to 1024 (which some users do), there is extra padding on the left and right sides causing a horizontal scroll bar to appear.

Upon inspecting with FireBug, I noticed the following HTML being generated:

<div aria-relevant="all" aria-live="polite" style="margin-left: 20px; margin-right: 20px; min-width: 1024px;">

The issue lies in this 20px margin on the left and right. To remove it, I added the following CSS:

html body.ms-backgroundImage form#aspnetForm div#s4-workspace.ms-core-overlay div#s4-bodyContainer div#contentRow div {
    margin-left: 0px !important;
    margin-right: 0px !important;
}

However, applying this change results in the page no longer being centered on screen sizes greater than 1024. Any suggestions on how to achieve a "full-screen" display for those using 1024 resolution while keeping it centered for higher resolutions?

html css sharepoint-2013 centering

Answer 1

Answer №1

Here's a neat CSS trick you can use.

Try this out:

html body.ms-backgroundImage form#aspnetForm div#s4-workspace.ms-core-overlay div#s4-bodyContainer div#contentRow div {
  margin-left: 0 auto !important;
  margin-right: 0 auto !important;
}

Alternatively, you could use the following code which achieves the same result:

html{ margin: 0px; margin: auto; }

Sometimes older versions of Internet Explorer may not properly support margin: auto;. To work around this issue, consider adding the following:

body {
  text-align: center;
 }

Please note that this workaround is specifically for older IE browsers.

Answer 2

Here's a neat CSS trick you can use.

Try this out:

html body.ms-backgroundImage form#aspnetForm div#s4-workspace.ms-core-overlay div#s4-bodyContainer div#contentRow div {
  margin-left: 0 auto !important;
  margin-right: 0 auto !important;
}

Alternatively, you could use the following code which achieves the same result:

html{ margin: 0px; margin: auto; }

Sometimes older versions of Internet Explorer may not properly support margin: auto;. To work around this issue, consider adding the following:

body {
  text-align: center;
 }

Please note that this workaround is specifically for older IE browsers.

Answer 3

Answer №2

Implement max-width:

#main_container {
    max-width:1200px !important;
    margin-left: auto !important;
    margin-right: auto !important;  
    background-color:#FFFFFF !important;
}

Answer 4

Implement max-width:

#main_container {
    max-width:1200px !important;
    margin-left: auto !important;
    margin-right: auto !important;  
    background-color:#FFFFFF !important;
}

Answer 5

Answer №3

In order to fix this issue, you should update the width attribute to max-width and reset the min-width value:

http://example.com/hi23F/

div {
  max-width: 1200px !important; /* new */
  margin-left: auto !important;
  margin-right: auto !important;  
  background-color: #FFF !important;
  min-width: 0 !important; /* reset */
}

Answer 6

In order to fix this issue, you should update the width attribute to max-width and reset the min-width value:

http://example.com/hi23F/

div {
  max-width: 1200px !important; /* new */
  margin-left: auto !important;
  margin-right: auto !important;  
  background-color: #FFF !important;
  min-width: 0 !important; /* reset */
}

Answer 7

Answer №4

**Many screens have a width of 1024px. However, for smaller screens, the horizontal scrollbar becomes unavoidable if you want to maintain a specific width for your webpage or web application (consider using min-width and max-width). Unless you are designing specifically for a browser like Chrome, it's wise to make your page about 4px smaller to account for small borders on most web browsers that reduce the available display space on a 1024px screen. Please keep these factors in mind.

If you're facing issues with margins, you can try using this CSS line:

body {margin: 0; padding: 0;}

This code snippet ensures that the body element has no additional padding, eliminating extra margin spaces on the sides of your website.

If the scrollbar continues to appear when unwanted, you can also add the following lines to your CSS file:

@media only screen and (min-device-width: 1020px) and (max-device-width: 1030px){
    body {overflow: hidden;}
}

This media query checks if the window size falls within certain parameters (in this case between 1020px and 1030px). If so, the body element will hide any content exceeding the window size, effectively disabling the scrollbar.

Answer 8

**Many screens have a width of 1024px. However, for smaller screens, the horizontal scrollbar becomes unavoidable if you want to maintain a specific width for your webpage or web application (consider using min-width and max-width). Unless you are designing specifically for a browser like Chrome, it's wise to make your page about 4px smaller to account for small borders on most web browsers that reduce the available display space on a 1024px screen. Please keep these factors in mind.

If you're facing issues with margins, you can try using this CSS line:

body {margin: 0; padding: 0;}

This code snippet ensures that the body element has no additional padding, eliminating extra margin spaces on the sides of your website.

If the scrollbar continues to appear when unwanted, you can also add the following lines to your CSS file:

@media only screen and (min-device-width: 1020px) and (max-device-width: 1030px){
    body {overflow: hidden;}
}

This media query checks if the window size falls within certain parameters (in this case between 1020px and 1030px). If so, the body element will hide any content exceeding the window size, effectively disabling the scrollbar.

CSS- The ultimate guide to perfectly centering a webpage without the need for extra margins!

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Having trouble using Selenium for Chrome to locate an element in an HTML file using C#?

Dynamic value for href in div using Angular

Struggling to break free from the confines of an overflow-hidden container in swiperjs due to

You are unable to align a paragraph with a specific width in the center

Is it possible to incorporate multiple searchBoxes on my website using the Google Maps API?

Tips for modifying HTML template code within a Typescript document using Atom

Searching for matching strings in jQuery and eliminating the parent div element

Trouble with Selenium Webdriver executing Custom Ribbon Button

Using Jquery to enhance navigation tabs with pointers

When I switch to mobile view, my navigation menu vanishes

Tips for uncovering a concealed div within an iframe?

Tips for accessing a child element within a specific div from a selection of divs in Angular

Creating a Dynamic Navigation Bar using React and NextJS

Creating visuals from written content

The variable in the HTML input value is not fully visible when filling out the HTML form

Is there a way to ensure that the content within a transparent div is completely visible?

Sprockets could not locate the file for jquery.atwho

Tips for positioning the text and icon within a tag nestled in a paragraph tag?

Building Nested Divs with JavaScript

The css values for component _nghost-c0 in an Angular application