html css width issue when window has scroll on bottom

Question

I am working on a site, and I can not figure out how to solve this problem. When the page is loaded and the browser is maximized, the bottom bar goes all across the screen, background is showing blue.

When the site is resized and the browser has the bottom scroll bar visible to scroll horizontal, the background of the div cuts off where the screen ends, and it is just white after that, instead of filling it all the way blue.

Any idea what do I need to change on this? I assume the Body of the site needs something? I know probably super easy just cant figure it out.

Thanks

* {
  box-sizing: border-box;
}

html {
  width: 100%;
  height: 100%;
}

body {
  background-color: #FFFFFF;
  box-sizing: border-box;
  color: #FFFFFF;
  font-family: "Lato", Helvetica Neue, sans-serif;
  font-weight: 300;
  margin: 0px;
  width: 100%;
  text-align: left;
  background-repeat: no-repeat;
  background-attachment: fixed;
}

#content {
  background-color: #FFFFFF;
  color: #000433;
  font-size: 0px;
}

#content-block {
  width: 100%;
  background-color: #FFFFFF;
  padding: 20px 0px;
  font-size: 12px;
}

#content-container {}

#content-headline {
  font-size: 55px;
  font-weight: 500;
  line-height: 55px;
  margin: 0 0 10px 0;
  text-transform: uppercase;
}

#content-item-container {
  width: 100%;
  font-size: 0;
}

#content-wrapper {
  max-width: 1460px;
  min-width: 1200px;
  padding: 0px 48px;
  margin: 40px auto 0 auto;
  text-align: center;
}

#facts-block {
  padding: 20px 0px;
  margin: 40px auto 0 auto;
  background-color: #EFF6FF;
  width: 100%;
  color: #000433;
  font-size: 0px;
  font-weight: 500;
}

#facts-block-content {
  padding: 0 0 0 20px;
  display: inline-block;
  vertical-align: top;
  height: 55px;
}

#facts-block-headline {
  font-size: 16px;
  margin: 0 0 14px 0;
  text-transform: uppercase;
}

#facts-block-text {
  font-size: 12px;
  font-weight: 400;
  text-transform: capitalize;
}

#facts-block-item {
  font-size: 0px;
  display: inline-block;
  margin: 0px;
  width: 25%;
  padding: 40px 0px;
  text-align: left;
}

#facts-block-wrapper {
  min-width: 1200px;
  max-width: 1460px;
  ;
  margin: auto;
  text-align: center;
  padding: 0px 48px;
}

#legal-content-headline {}

#legal-content-item {}

#legal-content-paragraph {
  font-size: 14px;
  font-weight: 300;
  line-height: 25px;
  text-align: justify;
  margin: 0 0 40px 0;
  color: #000433;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Title</title>
</head>

<body>

  <!-- CONTENT -->
  <div id="content">

    <!-- CONTENT BLOCK -->
    <div id="content-block">
      <div id="content-wrapper">
        <div id="content-container">
          <div id="content-headline">Lorem Ipsum</div>
          <div id="content-item-container">

            <div id="legal-content-wrapper">
              <div id="legal-content-item">
                <div id="legal-content-paragraph">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Amet porttitor eget dolor morbi non arcu. In nibh mauris cursus mattis molestie a iaculis at erat. Neque volutpat
                  ac tincidunt vitae semper quis. Augue interdum velit euismod in. Viverra suspendisse potenti nullam ac tortor vitae purus faucibus ornare. Sapien pellentesque habitant morbi tristique senectus et. Eget nunc scelerisque viverra mauris.
                  Sed felis eget velit aliquet sagittis id consectetur purus. Tincidunt vitae semper quis lectus nulla at. Vitae congue mauris rhoncus aenean vel. Sit amet est placerat in egestas erat imperdiet sed euismod. Malesuada fames ac turpis egestas
                  maecenas pharetra convallis posuere morbi. Feugiat vivamus at augue eget arcu dictum. Arcu dictum varius duis at consectetur lorem. Tellus elementum sagittis vitae et leo. Faucibus vitae aliquet nec ullamcorper sit amet risus.</div>

                <div id="legal-content-headline">HEADLINE</div>

                <div id="legal-content-paragraph">Vitae nunc sed velit dignissim sodales ut eu. Pellentesque habitant morbi tristique senectus et netus et malesuada. Tellus in hac habitasse platea dictumst. Ultrices dui sapien eget mi. Eu mi bibendum neque egestas. Neque convallis a cras
                  semper. Sit amet mattis vulputate enim nulla aliquet porttitor. Massa ultricies mi quis hendrerit dolor magna eget est lorem. Ut tellus elementum sagittis vitae et leo duis. Eget nullam non nisi est sit amet facilisis magna. Facilisis
                  volutpat est velit egestas dui id ornare arcu. Senectus et netus et malesuada <a href="#">fames ac turpis</a> egestas.</div>
              </div>
            </div>

          </div>
        </div>
      </div>
    </div>


    <!-- FACTS Block -->
    <div id="facts-block">
      <div id="facts-block-wrapper">

        <div id="facts-block-item">
          <div id="facts-block-content">
            <div id="facts-block-headline">
              Headline
            </div>
            <div id="facts-block-text">
              Text
            </div>
          </div>
        </div>

        <div id="facts-block-item">
          <div id="facts-block-content">
            <div id="facts-block-headline">
              Headline
            </div>
            <div id="facts-block-text">
              Text
            </div>
          </div>
        </div>

        <div id="facts-block-item">
          <div id="facts-block-content">
            <div id="facts-block-headline">
              Headline
            </div>
            <div id="facts-block-text">
              Text
            </div>
          </div>
        </div>

        <div id="facts-block-item">
          <div id="facts-block-content">
            <div id="facts-block-headline">
              Headline
            </div>
            <div id="facts-block-text">
              Text
            </div>
          </div>
        </div>

      </div>
    </div>

  </div>

</body>

</html>

most likely because your content wrapper has a min width of 1200px - anything not in it that has a width of 100% will only be as wide as the screen when the screen size is smaller than 1200px — Pete
– Pete, Commented Jan 8, 2024 at 10:28
If you want a consistant layout using % and min-width, you should probably have your min-width div as a wrapper for all your content with position: relative. something like this (I moved the wrapper div higher in hierarchy, added position: relative with a lower min-width for it to be more obvious on small screen). You may need to move margins and paddings to another div, this is just a quick example. With this, all descendants of the wrapper that use 100% will adapt to the wrapper's size — Kaddath
– Kaddath, Commented Jan 8, 2024 at 11:32

Prasanna kulal · Accepted Answer · 2024-01-08 13:12:59Z

1

You can remove the min-width property. It will fix the scroll and div cutoff issues.

#content-wrapper {
  max-width: 1460px;
  /* min-width: 1200px; */
  padding: 0px 48px;
  margin: 40px auto 0 auto;
  text-align: center;
}

#facts-block-wrapper {
  /* min-width: 1200px; */
  max-width: 1460px;
  margin: auto;
  text-align: center;
  padding: 0px 48px;
}

edited Jan 8, 2024 at 13:12

answered Jan 8, 2024 at 13:12

Prasanna kulal

74 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Prashant · Accepted Answer · 2024-01-08 11:20:23Z

Remove the min-width for the use of the wrapper. If you can set the container for a specific width, then use the max-width so you can easily manage all your elements without scrolling through the section. Use the below code to fulfil your requirements.

* {
    box-sizing: border-box;
}

html {
    width: 100%;
    height: 100%;
}

body {
    background-color: #FFFFFF;
    box-sizing: border-box;
    color: #FFFFFF;
    font-family: "Lato", Helvetica Neue, sans-serif;
    font-weight: 300;
    margin: 0px;
    width: 100%;
    text-align: left;
    background-repeat: no-repeat;
    background-attachment: fixed;
}

#content {
    background-color: #FFFFFF;
    color: #000433;
    font-size: 0px;
}

#content-block {
    width: 100%;
    background-color: #FFFFFF;
    padding: 20px 0px;
    font-size: 12px;
}

#content-headline {
    font-size: 55px;
    font-weight: 500;
    line-height: 55px;
    margin: 0 0 10px 0;
    text-transform: uppercase;
}

#content-item-container {
    width: 100%;
    font-size: 0;
}

#content-wrapper {
    max-width: 1460px;
    min-width: 100%;
    padding: 0px 48px;
    margin: 40px auto 0 auto;
    text-align: center;
}

#facts-block {
    padding: 20px 0px;
    margin: 40px auto 0 auto;
    background-color: #EFF6FF;
    width: 100%;
    color: #000433;
    font-size: 0px;
    font-weight: 500;
}

#facts-block-content {
    padding: 0 0 0 20px;
    display: inline-block;
    vertical-align: top;
    height: 55px;
}

#facts-block-headline {
    font-size: 16px;
    margin: 0 0 14px 0;
    text-transform: uppercase;
}

#facts-block-text {
    font-size: 12px;
    font-weight: 400;
    text-transform: capitalize;
}

#facts-block-item {
    font-size: 0px;
    display: inline-block;
    margin: 0px;
    width: 25%;
    padding: 40px 0px;
    text-align: left;
}

#facts-block-wrapper {
    min-width: 100%;
    max-width: 1460px;
    margin: auto;
    text-align: center;
    padding: 0px 48px;
}

#legal-content-paragraph {
    font-size: 14px;
    font-weight: 300;
    line-height: 25px;
    text-align: justify;
    margin: 0 0 40px 0;
    color: #000433;
}

<!-- CONTENT -->
<div id="content">
    <!-- CONTENT BLOCK -->
    <div id="content-block">
        <div id="content-wrapper">
            <div id="content-container">
                <div id="content-headline">Lorem Ipsum</div>
                <div id="content-item-container">
                    <div id="legal-content-wrapper">
                        <div id="legal-content-item">
                            <div id="legal-content-paragraph">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Amet porttitor eget dolor morbi non arcu. In nibh mauris cursus mattis molestie a iaculis at erat. Neque volutpat ac tincidunt vitae semper quis. Augue interdum velit euismod in. Viverra suspendisse potenti nullam ac tortor vitae purus faucibus ornare. Sapien pellentesque habitant morbi tristique senectus et. Eget nunc scelerisque viverra mauris. Sed felis eget velit aliquet sagittis id consectetur purus. Tincidunt vitae semper quis lectus nulla at. Vitae congue mauris rhoncus aenean vel. Sit amet est placerat in egestas erat imperdiet sed euismod. Malesuada fames ac turpis egestas maecenas pharetra convallis posuere morbi. Feugiat vivamus at augue eget arcu dictum. Arcu dictum varius duis at consectetur lorem. Tellus elementum sagittis vitae et leo. Faucibus vitae aliquet nec ullamcorper sit amet risus.</div>
                            <div id="legal-content-headline">HEADLINE</div>
                            <div id="legal-content-paragraph">Vitae nunc sed velit dignissim sodales ut eu. Pellentesque habitant morbi tristique senectus et netus et malesuada. Tellus in hac habitasse platea dictumst. Ultrices dui sapien eget mi. Eu mi bibendum neque egestas. Neque convallis a cras semper. Sit amet mattis vulputate enim nulla aliquet porttitor. Massa ultricies mi quis hendrerit dolor magna eget est lorem. Ut tellus elementum sagittis vitae et leo duis. Eget nullam non nisi est sit amet facilisis magna. Facilisis volutpat est velit egestas dui id ornare arcu. Senectus et netus et malesuada <a href="#">fames ac turpis</a> egestas.</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- FACTS Block -->
    <div id="facts-block">
        <div id="facts-block-wrapper">
            <div id="facts-block-item">
                <div id="facts-block-content">
                    <div id="facts-block-headline">
                        Headline
                    </div>
                    <div id="facts-block-text">
                        Text
                    </div>
                </div>
            </div>
            <div id="facts-block-item">
                <div id="facts-block-content">
                    <div id="facts-block-headline">
                        Headline
                    </div>
                    <div id="facts-block-text">
                        Text
                    </div>
                </div>
            </div>
            <div id="facts-block-item">
                <div id="facts-block-content">
                    <div id="facts-block-headline">
                        Headline
                    </div>
                    <div id="facts-block-text">
                        Text
                    </div>
                </div>
            </div>
            <div id="facts-block-item">
                <div id="facts-block-content">
                    <div id="facts-block-headline">
                        Headline
                    </div>
                    <div id="facts-block-text">
                        Text
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

"Remove the min-width" should only be an answer if there was no way to achieve what the OP wants, which is not the case. I won't downvote, but this is not the best solution for the OP

Collectives™ on Stack Overflow

html css width issue when window has scroll on bottom

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related