Div Section not extending

user_12960831 0
Viewed 57

I am having an issue with resizing and a div. When I resize the browser, then scroll over to the right, I see that the bottom div is not extending all the way despite my width at 100% I have tried position and width tags and am at a loss. Any ideas? The form is moving into the white space and not sticking to the background div area.

https://codepen.io/CaptainMattyP/pen/mdJRKpo

body {
  width: 100%;
  margin: 0px;
  background-image: url("https://wallpaperplay.com/walls/full/d/8/b/329997.jpg");
  background-attachment: fixed;
  font-family: 'Ubuntu Condensed';
  right: 0px;
}

h1 {
  text-align: center;
  padding: 200px 0px 0px 1320px;
  position: absolute;
  white-space: nowrap;
}

#navbar {
  height: 50px;
  width: 100%;
  background-image: url("https://www.setaswall.com/wp-content/uploads/2018/02/Grey-Abstract-Wallpaper-16-1920x1080.jpg");
  background-color: rgb(80, 80, 86);
  border-bottom: solid;
  border-width: 1px;
  border-color: black;
  position: fixed;
  top: 0px;
  z-index: 5
}

a,
.white {
  text-decoration: none;
  color: white;
}

a:hover {
  color: limegreen;
}

ul {
  padding: 0px 0px 0px 1160px;
  white-space: nowrap;
}

li {
  color: white;
  display: inline;
  padding: 40px;
}

#welcome-section {
  height: 800px;
}

.picture {
  margin: 300px 0px 0px 1340px;
  border-radius: 50%;
  position: absolute;
  z-index: 1;
  box-shadow: 10px 10px 10px grey;
  border-style: solid;
  border-width: 1px;
}

#footer {
  height: 230px;
  background-image: url("https://www.setaswall.com/wp-content/uploads/2018/02/Grey-Abstract-Wallpaper-16-1920x1080.jpg");
  background-size: auto;
  border-top: solid;
  bottom: 0px;
  right: 0px;
  border-width: 1px;
}

#footer-info1 {
  color: white;
  padding: 80px 0px 0px 150px;
  positon: absolute;
}

#copyright {
  color: white;
  padding: 0px 0px 0px 900px;
  positon: absolute;
}

#contact-info {
  padding: 20px 10vw 0px 1600px;
  position: absolute;
}

.block {
  display: block;
}

@media (max-height: 100%) {
  #welcome-section {
    height: 800px;
  }
}
<link href="https://fonts.googleapis.com/css?family=Ubuntu+Condensed&display=swap" rel="stylesheet">

<main>
  <nav id="navbar">
    <ul>
      <li><a href="">About</a></li>
      <li><a href="">Skills</a></li>
      <li><a href="" class="projects">Projects</a></li>
      <li><a href="#footer">Contact</a></li>
      <li><a href="https://www.freecodecamp.org/fccef50e112-0b35-4195-878f-e76ad4931e3d" id="profile-link" target="_blank">FCC Profile</a></li>
    </ul>
  </nav>
  <h1>Hi, I'm Matt. <br>Future Front-End Developer.</h1>

  <div id="welcome-section">
    <img class="picture" src="https://i.ibb.co/71rD5ND/picture.png">
  </div>

  <section id="footer">
    <form style="display: block" id="contact-info">
      <label for="email" class="white">E-mail Address:
         <input id="email" type="email" name="emailaddress" class="block">
       </label>
      <label for="inquiry" class="white">Comments or Inquiries:
         <textarea rows="8" cols="25" style="resize: none" class="block">
         </textarea>
       </label>
      <button type="submit">Submit</button>
    </form>
    <div id="footer-info1">
      Matthew Paciello <br><br> 561-305-5761
      <br> Boca Raton, FL<br> mpaciell@gmail.com
    </div>
    <div id="copyright">
      @Matthew Paciello
    </div>
  </section>
</main>

css html
3 Answers

I'm going to take a guess here that you have a very wide monitor that you are doing most of your work on. You have hard coded almost all of the padding and margins used in your code to place the different items on the page. This is the root of your problem. When you put something to width: 100% what is actually occurring is you are telling the browser to give a width of 100% of the current screen size. This means it will be subjective to the size of the browser that is displaying the page. The rest of your padding and margins though are set to a hard pixel value. Combine these two different display styles together and you can have a page that displays different portions off of the initial screen.

I think you might want something closer to this. I do still use hard coded padding values, but they are padding based on dynamic values instead of absolute values so it allows for easier reflowing and resizing of the page so it looks better for more screen sizes.

body {
  width: 100%;
  margin: 0px;
  background-image: url("https://wallpaperplay.com/walls/full/d/8/b/329997.jpg");
  background-attachment: fixed;
  font-family: 'Ubuntu Condensed';
  right: 0px;
}

h1 {
  text-align: center;
  white-space: nowrap;
}

#navbar {
  height: 50px;
  width: 100%;
  background-image: url("https://www.setaswall.com/wp-content/uploads/2018/02/Grey-Abstract-Wallpaper-16-1920x1080.jpg");
  background-color: rgb(80, 80, 86);
  border-bottom: solid;
  border-width: 1px;
  border-color: black;
  top: 0px;
  z-index: 5
}

a,
.white {
  text-decoration: none;
  color: white;
}

a:hover {
  color: limegreen;
}

ul {
  white-space: nowrap;
  text-align: right;
  padding-right: 10px;
  padding-top: 10px;
  margin: 0px;
}

li {
  color: white;
  display: inline;
  padding-left: 10px;
}

#welcome-section {
  padding-bottom: 40px;
  text-align: center;
}

.picture {
  border-radius: 50%;
  z-index: 1;
  box-shadow: 10px 10px 10px grey;
  border-style: solid;
  border-width: 1px;
}

#footer {
  background-image: url("https://www.setaswall.com/wp-content/uploads/2018/02/Grey-Abstract-Wallpaper-16-1920x1080.jpg");
  background-size: auto;
  border-top: solid;
  bottom: 0px;
  right: 0px;
  border-width: 1px;
  overflow: auto;
}

#footer-info1 {
  color: white;
  text-align: right;
  padding-right: 10px;
  float: right;
}

#email-section {
  float: left;
  padding-bottom: 10px;
  padding-left: 10px;
}

.block {
  display: block;
}
<link href="https://fonts.googleapis.com/css?family=Ubuntu+Condensed&display=swap" rel="stylesheet">

<main>
  <nav id="navbar">
    <ul>
      <li><a href="">About</a></li>
      <li><a href="">Skills</a></li>
      <li><a href="" class="projects">Projects</a></li>
      <li><a href="#footer">Contact</a></li>
      <li><a href="https://www.freecodecamp.org/fccef50e112-0b35-4195-878f-e76ad4931e3d" id="profile-link" target="_blank">FCC Profile</a></li>
    </ul>
  </nav>
  <h1>Hi, I'm Matt. <br>Future Front-End Developer.</h1>

  <div id="welcome-section">
    <img class="picture" src="https://i.ibb.co/71rD5ND/picture.png">
  </div>

  <section id="footer">
    <div id="email-section">
      <form style="display: block" id="contact-info">
        <label for="email" class="white">E-mail Address:
           <input id="email" type="email" name="emailaddress" class="block">
         </label>
        <label for="inquiry" class="white">Comments or Inquiries:
           <textarea rows="8" cols="25" style="resize: none" class="block">
           </textarea>
         </label>
        <button type="submit">Submit</button>
      </form>
    </div>
    <div id="footer-info1">
      Matthew Paciello <br><br> 561-305-5761
      <br> Boca Raton, FL<br> mpaciell@gmail.com
      <div id="copyright">
        @Matthew Paciello
      </div>
    </div>
  </section>
</main>

user_24835070

If I'm reading this right, I suggest adjusting the bottom area and use a flex like so:

body {
  width: 100%;
  margin: 0px;
  background-image: url("https://wallpaperplay.com/walls/full/d/8/b/329997.jpg");
  background-attachment: fixed;
  font-family: 'Ubuntu Condensed';
  right: 0px;
}

h1 {
  text-align: center;
  padding: 200px 0px 0px 1320px;
  position: absolute;
  white-space: nowrap;
}

#navbar {
  height: 50px;
  width: 100%;
  background-image: url("https://www.setaswall.com/wp-content/uploads/2018/02/Grey-Abstract-Wallpaper-16-1920x1080.jpg");
  background-color: rgb(80, 80, 86);
  border-bottom: solid;
  border-width: 1px;
  border-color: black;
  position: fixed;
  top: 0px;
  z-index: 5
}

a,
.white {
  text-decoration: none;
  color: white;
}

a:hover {
  color: limegreen;
}

ul {
  padding: 0px 0px 0px 1160px;
  white-space: nowrap;
}

li {
  color: white;
  display: inline;
  padding: 40px;
}

#welcome-section {
  height: 800px;
}

.picture {
  margin: 300px 0px 0px 1340px;
  border-radius: 50%;
  position: absolute;
  z-index: 1;
  box-shadow: 10px 10px 10px grey;
  border-style: solid;
  border-width: 1px;
}

#footer {
  height: 230px;
  background-image: url("https://www.setaswall.com/wp-content/uploads/2018/02/Grey-Abstract-Wallpaper-16-1920x1080.jpg");
  background-size: auto;
  border-top: solid;
  bottom: 0px;
  right: 0px;
  border-width: 1px;
  display:flex;
  flex-direction:row;
  justify-content: space-between;
  align-items: center;
}

#footer-info1 {
  color: white;
}

#copyright {
  color: white;
}

#contact-info {
}

.block {
  display: block;
}

@media (max-height: 100%) {
  #welcome-section {
    height: 800px;
  }
}
<link href="https://fonts.googleapis.com/css?family=Ubuntu+Condensed&display=swap" rel="stylesheet">

<main>
  <nav id="navbar">
    <ul>
      <li><a href="">About</a></li>
      <li><a href="">Skills</a></li>
      <li><a href="" class="projects">Projects</a></li>
      <li><a href="#footer">Contact</a></li>
      <li><a href="https://www.freecodecamp.org/fccef50e112-0b35-4195-878f-e76ad4931e3d" id="profile-link" target="_blank">FCC Profile</a></li>
    </ul>
  </nav>
  <h1>Hi, I'm Matt. <br>Future Front-End Developer.</h1>

  <div id="welcome-section">
    <img class="picture" src="https://i.ibb.co/71rD5ND/picture.png">
  </div>

  <section id="footer">
    <div id="footer-info1">
      Matthew Paciello <br><br> 561-305-5761
      <br> Boca Raton, FL<br> mpaciell@gmail.com
    </div>

    <div id="copyright">
      @Matthew Paciello
    </div>

    <form style="display: block" id="contact-info">
      <label for="email" class="white">E-mail Address:
         <input id="email" type="email" name="emailaddress" class="block">
       </label>
      <label for="inquiry" class="white">Comments or Inquiries:
         <textarea rows="8" cols="25" style="resize: none" class="block">
         </textarea>
       </label>
      <button type="submit">Submit</button>
    </form>

  </section>
</main>

user_11867020

Your footer is 100% but:

  • The form in your footer have a 10vw padding-right which make the page horizontally scrollabe. And that white space on your right. either bring the form more to the left by reducing the padding-left or padding-right.
  • The position of the image is set by margin-top and margin-left which also plays a roll in making the page horizontally off, and scrollable. You can bring the image closer to the left by reducing margin-left of it. Or use other methods to center the image, if necessary.
user_93578720
Related