How to stop content from moving.

Question

Hi guys. I've being studying HTML & CSS for a few months now and having trouble woth something. I'm doing a small project for college and can't seem to get the content on the right and my footer to stay still on the page. Also any other issues or bugs with the page you can see, please assist me. It would be much appreciated!

Thanks

<!DOCTYPE html>
<html>

<head>
    <link href="https://fonts.googleapis.com/css?family=Roboto+Condensed" rel="stylesheet">
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" type="text/css" href="contact.css">
    <title>Contact Us</title>
</head>

<body>
<div class="block">
<div id="nav">
    <ul>
        <li><a href="home.html">Home</a></li>
        <li><a href="design.html">Design</a></li>
        <li><a href="create.html">Create</a></li>
        <li><a href="legal.html">Legal</a></li>
        <li><a href="publishing.html">Publishing</a></li>
        <li><a href="contact.html">Contact</a></li>
    </ul>
</div>
<div class="wrapper">
        <section id="boxes">
            <div class="container">
            <div class="box">
            <h1>Contact Us</h1> 
            <div class="phone">
            <img src="phone.jpg" height="175px width="150px">
            </div>
            <h3>Phone +447837574081</h3>
            <h4>Opening Hours: Mon - Friday 9:00 - 17:00</h4>
            <p>Address: 123 High Street<br></p>
            <p>Rotherham</p>
            <p>South Yorkshire</p>
            <p>S60 4DH</p>
        </div>
    </section>
</div>
</section>
</div>
</wrapper>

<div class="wrapper2">
            <section id="boxes">
            <div class="container">
            <div class="box2">
                <h3>Have A Question?</h3>
                <img src="mail.png" height="175px" width="175px">
                <form><br>
                First Name:&nbsp;<input type="text" name="" placeholder="First Name...">
                </form></div><br>
                <form>
                Last Name:&nbsp;<input type="text" name="" " placeholder="Last Name...">
                </form><br>
                <form>
                Email Address:&nbsp;<input type="text" name=""" placeholder="Email Address...">
                </form><br>
                Question:&nbsp;<br><textarea>   
                </textarea rows="4" cols="50">
                <form><br>
                <button>Submit</button> 
            </div>
        </form>
    </div>
        </section>
    </div>
</wrapper>
<div class="footer">
        <p>How To Create A Web Page, Copyright &copy; 2018</p>
        </</div>
</body>
</html>

body{
    background-color: #cce6ff;
    font-family: 'Roboto Condensed', sans-serif;
    margin: 0;
    padding: 0;
    font-size: 20px;
}
img{
    border-radius: 50%;
}
#nav {
font-size: 25px;
background-color: #0077b3;
height: 35px;
padding: 20px;
color: white;
border-bottom: white 3px solid;
display: table;
width: 100%; 
overflow: hidden;
}
#nav ul {
text-align: center;
list-style-type: none;
padding: 0;
margin: 0;
}

#nav li {
display: inline;
padding: 20px;
vertical-align: middle;
}

#nav a {
color: white;
padding: 10px 10px 10px 10px;
text-decoration: none;
vertical-align: middle;
}
#nav a:hover{
    color: black;
    text-decoration: bold;
    background-color: #80d4ff;
    border-radius: 10px;
}
button{
    color: white;
    background-color: #0066cc;
    width: 100px;
    height: 30px;
    border-radius: 10px;
    border: 3px solid #004d99;
    margin-top: 0;
}
button:hover{
    background-color: #cceeff;
    color: black;
    cursor: pointer;
}
#question{
    float: right;
}
.wrapper{
    float: left;
    margin-left: 20%;
    text-align: center;
}
.wrapper2{
    float: right;
    margin-right: 25%;
    text-align: center;
    margin-top: 5px;
}
.footer{
font-size: 25px;
background-color: #0077b3;
height: 80px;
color: white;
text-align: center;
padding-top: :0px;
margin-top: 50%;
border-top: 3px white solid;
display: block;
}
/* Media Queries */
@media (max-width: 768px){
    #nav ul li a{
        display: contents;
    }

Answer 1 · 2018-10-19T11:34:49Z

October 19, 2018 11:34am

Right... there's a few things that i've addressed in your code examples in the comments, but if you have any questions with anything that i've done, it'll be easier to discuss them using the code that i've formatted below.

<!DOCTYPE html>
<html>

<head>
  <link href="https://fonts.googleapis.com/css?family=Roboto+Condensed" rel="stylesheet">
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" type="text/css" href="contact.css">
  <title>Contact Us</title>
</head>

<body>

  <div class="block">

    <div id="nav">
      <ul>
        <li><a href="home.html">Home</a></li>
        <li><a href="design.html">Design</a></li>
        <li><a href="create.html">Create</a></li>
        <li><a href="legal.html">Legal</a></li>
        <li><a href="publishing.html">Publishing</a></li>
        <li><a href="contact.html">Contact</a></li>
      </ul>
    </div>

    <div class="wrapper">
      <section id="boxes">
        <div class="container">
          <div class="box">
            <h1>Contact Us</h1>
            <div class="phone">
              <img src="phone.jpg" height="175px" width="150px" />
            </div>

            <h3>Phone +447837574081</h3>
            <h4>Opening Hours: Mon - Friday 9:00 - 17:00</h4>

            <p>Address: 123 High Street<br></p>
            <p>Rotherham</p>
            <p>South Yorkshire</p>
            <p>S60 4DH</p>
          </div>
        </div> <!-- Needed to close the .box tag -->
      </section>
    </div>

    <!-- </section> // No opening section tag to close -->

    <!-- </div> // No opening div tag to close -->

    <!-- </wrapper> // No opening wrapper tag to close -->

    <div class="wrapper2">
      <section id="boxes">
        <div class="container">
          <div class="box2">
            <h3>Have A Question?</h3>
            <img src="mail.png" height="175px" width="175px">

            <form>
              <!--
                1. Should probably wrap your inputs in a div to style rather than adding line breaks
                2. Wrap your input labels in correct tags too
                3. You don't need seperate <form> tags for each input
                4. <textarea> needed some refactoring as it was opening with a closing tag
              -->
              <div>
                <label>First Name: </label>
                <input type="text" name="" placeholder="First Name...">
              </div>
              <div>
                <label>Last Name: </label>
                <input type="text" name="" placeholder="Last Name...">
              </div>
              <div>
                <label>Email Address: </label>
                <input type="text" name="" placeholder="Email Address...">
              </div>
              <div>
                <label>Question: </label>
                <textarea rows="4" cols="50"></textarea>
              </div>
              <div>
                <button>Submit</button>
              </div>
            </form>
          </div>
        </div> <!-- Needed to close the .container tag -->
      </section>
    </div>
    <!-- </wrapper> // No opening wrapper tag to close -->

    <div class="footer">
      <p>How To Create A Web Page, Copyright © 2018</p>
    </div>

  </div> <!-- // Needed to close the opening <div> -->
</body>

</html>

body {
  background-color: #cce6ff;
  font-family: 'Roboto Condensed', sans-serif;
  margin: 0;
  padding: 0;
  font-size: 20px;
}

img {
  border-radius: 50%;
}

nav {
  font-size: 25px;
  background-color: #0077b3;
  height: 35px;
  padding: 20px;
  color: white;
  border-bottom: white 3px solid;
  display: table;
  width: 100%;
  overflow: hidden;
}

nav ul {
  text-align: center;
  list-style-type: none;
  padding: 0;
  margin: 0;
}

nav li {
  display: inline;
  padding: 20px;
  vertical-align: middle;
}

nav a {
  color: white;
  padding: 10px 10px 10px 10px;
  text-decoration: none;
  vertical-align: middle;
}

nav a:hover {
  color: black;
  text-decoration: bold;
  background-color: #80d4ff;
  border-radius: 10px;
}

button {
  color: white;
  background-color: #0066cc;
  width: 100px;
  height: 30px;
  border-radius: 10px;
  border: 3px solid #004d99;
  margin-top: 0;
}

button:hover {
  background-color: #cceeff;
  color: black;
  cursor: pointer;
}

.question {
  float: right;
}

.wrapper {
  float: left;
  margin-left: 20%;
  text-align: center;
}
.wrapper2 {
  float: right;
  margin-right: 25%;
  text-align: center;
  margin-top: 5px;
}
.footer {
  font-size: 25px;
  background-color: #0077b3;
  height: 80px;
  color: white;
  text-align: center;
  padding-top: 0px;
  margin-top: 50%;
  border-top: 3px white solid;
  display: block;
}

/* Media Queries */
@media (max-width: 768px) {
  #nav ul li a {
    display: contents;
  }
}

Answer 2 · 2018-10-21T12:17:24Z

October 21, 2018 12:17pm

David Perkins Yeah i guess you're right. Thanks for your help. I'll get there eventually! :)

Welcome to the Treehouse Community

Looking to learn something new?

Joshua Comrie

Joshua Comrie

How to stop content from moving.

Aidan Caddle

Aidan Caddle

Jonathan Grieve

Jonathan Grieve

2 Answers

David Perkins

David Perkins

Joshua Comrie

Joshua Comrie

David Perkins

David Perkins

Joshua Comrie

Joshua Comrie