0

Only a week into html/css so i know this is amateur stuff but after spending countless hour trying to get my background to fill all the space without going up into my header i figured that out(maybe the way i figured it out isnt the proper file stucture) but another issues arose. My footer will not stay to the bottom of the webpage.Please tell me what im doing wrong as far as layout goes .Much appreciated!!!!

Can anyone tell me if im on the right path as far as file structuring goes overall.Any pointers are appreciated

html {
  margin: 0 auto;
  height: 100%;
  max-width: 100%;
  min-width: 50%;
}

img {
  width: 20px;
  height: 20px;
  max-height: 20px;
  max-width: 18px;
}

span {
  float: right;
  margin-top: 6px;
  margin-left: 15px;
  margin-right: 15px;
}

header {
  padding: 13px;
  background-color: #563f46;
}

body {
  margin: 0 auto;
  color: white;
  font-size: 18px;
  font-weight: 700;
  background-image: url(img/gallerybackground.jpg);
  font-family: Cambria, Cochin, Georgia, Times, "Times New Roman", serif;
}

body {
  background-repeat: no-repeat;
  background-size: cover;
}

footer {
  background-color: #563f46;
  padding: 10px;
  color: black;
  margin-top: auto;
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Azura Tech</title>
  <link rel="stylesheet" href="document.css" />
</head>
<div>
  <header>
    Azura Tech

    <img src="img/flowerlogo.png" alt="" />
    <span>About Us</span>
    <span>Contact Us</span>
    <span class="logo"><img src="img/tiktokwht.png" alt="" /></span>
    <span class="logo"><img src="img/youtubewht.png" alt="" /></span>
  </header>
</div>

<body>
  <div class=".box">
    <main>
      Main Content
      <p>
        Lorem ipsum dolor sit, amet consectetur adipisicing elit. Fugiat et nisi nobis eaque nam, pariatur perspiciatis aut earum eius repellendus error, labore voluptatibus voluptatem placeat ipsum sapiente sequi sed, optio suscipit quo quis laudantium quibusdam!
        Voluptate nam quibusdam eius, corrupti ut voluptatem, facere modi delectus sapiente et dolorum voluptas consequuntur. Quaerat unde dicta soluta assumenda facilis vel inventore molestias architecto. Possimus perspiciatis assumenda placeat accusamus.
        Illo harum iusto maxime consectetur delectus laborum ipsam sapiente repellendus?
      </p>
    </main>
    <Sect>
      Sectional
      <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Expedita corrupti, eligendi totam nemo id quae, reprehenderit fugiat voluptate rem optio dolorem, deserunt blanditiis quod animi molestiae iste repudiandae incidunt similique!
      </p>
    </Sect>
    <article>
      Side Sectional
      <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Incidunt quas eos provident aspernatur accusantium quos. Omnis minima, quod dolorum sit culpa, iure atque porro quos nesciunt optio provident dolore esse!
      </p>
      <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Beatae non illo perferendis expedita numquam aliquid, itaque labore explicabo neque? Consequatur libero nostrum dolor id nobis facilis ipsum, voluptate esse iusto!
      </p>
    </article>
  </div>
</body>
<footer>
  Azura Tech
  <span>Contact Us</span>
  <span>About Us</span>
  <span>Social Media</span>
</footer>

</html>

For the Header to be at the top as it is.Background to fill up all white space and fill screen except for the Header and Footer Space

Sfili_81
  • 2,377
  • 8
  • 27
  • 36
Jeramiah Burke
  • 41
  • 4
  • 1
    Welcome to Stack Overflow! Please visit the [help], take the [tour] to see what and [ask]. Do some research - [search SO for answers](https://www.google.com/search?q=css+footer+bottom+site%3Astackoverflow.com). If you get stuck, post a [mcve] of your attempt, noting input and expected output using the [\[<>\]](https://meta.stackoverflow.com/questions/358992/ive-been-told-to-create-a-runnable-example-with-stack-snippets-how-do-i-do) snippet editor. – mplungjan Mar 21 '23 at 07:45
  • Simplest: `footer { background-color: #563f46; padding: 10px; color: black; position: absolute; bottom: 0; width: 100%; }` – mplungjan Mar 21 '23 at 07:49
  • 1
    Thanks you! was tinkering with it this morning and had got everything but the "position absolute" and i came and read this and the answer was clear.add line and fixed the issue.Much appreciarted! – Jeramiah Burke Mar 21 '23 at 21:09

0 Answers0