skip to Main Content

I want to sort the content of this HTML page under each other as opposed to next to each other but I can’t figure out why they stay side by side.

I tried putting <br> between the <div> elements but it did not do any good. I also tried playing around with the display and positioning parameters but that also did not give me any results.

body {
  background-color: #ffffff;
  color: #000000;
  font-family: Arial, sans-serif;
  min-height: 1000px;
}

#header {
  background-color: #000000;
  padding: 10px;
  text-align: center;
}

#header h1 {
  color: #FFFFFF;
  margin-top: 10px;
  padding-top: 10px;
}

#navbar {
  background-color: #000000;
  overflow: hidden;
  margin: auto;
  width: auto;
  text-align: center;
}

#navbar a {
  position: relative;
  display: inline-block;
  color: #FFFFFF;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

#navbar a:hover {
  background-color: #666666;
}

#content {
  margin-top: 20px;
  padding: 20px;
}

#about {
  margin-top: 20px;
  padding: 20px;
}

#footer {
  background-color: #000000;
  color: #ffffff;
  padding: 10px;
  text-align: center;
  position: fixed;
  bottom: 0;
  width: 100%;
}

label {
  display: block;
  margin-bottom: 10px;
}

input[type=text],
input[type=email],
textarea {
  width: 100%;
  padding: 12px 20px;
  margin: 8px 0;
  display: inline-block;
  border: 1px solid #ccc;
  box-sizing: border-box;
  font-size: 16px;
}

textarea {
  height: 150px;
}

input[type=text],
input[type=password] {
  width: 100%;
  padding: 12px 20px;
  margin: 8px 0;
  display: inline-block;
  border: 1px solid #ccc;
  box-sizing: border-box;
  font-size: 16px;
}

button[type=submit] {
  background-color: #000000;
  color: #FFFFFF;
  padding: 12px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 16px;
}

button[type=submit]:hover {
  background-color: #666666;
}

.container {
  background-color: #FFFFFF;
  padding: 40px;
  border-radius: 10px;
  box-shadow: 0px 0px 10px #333333;
  width: 400px;
  margin: 0 auto;
  display: inline-block;
}

.contact-info {
  display: flex;
  justify-content: space-between;
  margin-top: 20px;
}

.contact-info div {
  flex-basis: calc(33.3% - 20px);
  margin: 0 10px;
}

.map-container {
  margin-top: 20px;
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
}

.map-container iframe {
  position: absolute;
  display: inline-block;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.contact-info-container {
  display: flex;
  justify-content: space-between;
  margin-top: 20px;
}

.contact-info-container div {
  flex-basis: calc(33.3% - 20px);
  margin: 0 10px;
}

.contact-info-container .map-container {
  flex-basis: 50%;
  margin-left: 10px;
}
<div id="header">
  <tr>
    <td><img src="pavillion.jpg" alt="Pavillion Logo" width="120px" height="120px"></td>
    <td>
      <h1>Pavillion Architects</h1>
    </td>
  </tr>

</div>
<div id="navbar">
  <a href="index.html">Home</a>
  <a href="about.html">About Us</a>
  <a href="login.html">Login</a>
  <a href="#">Contact Us</a>
</div>
<div id="content">
  <h2>Contact Us</h2>
  <div class="contact-info-container">
    <div>
      <h2>Contact Us</h2>
      <p><strong>Address:</strong><br>123 Main Street<br>New York, NY 10001<br>United States</p>
      <p><strong>Email:</strong><br>[email protected]</p>
      <p><strong>Phone:</strong><br>+1 (123) 456-7890</p>
    </div>
    <br>
    <div class="map-container">
      <iframe src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d13807.244846734851!2d31.379021!3d30.0995927!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x145815dcc3e4e599%3A0xc13091367d1af2a3!2zUGF2aWxsaW9uIEFyY2hpdGVjdHMgUy5BLkUg2KjYp9mB2YrZhNmK2YjZhiDYp9ix2YPZitiq2YPYqtiz!5e0!3m2!1sen!2seg!4v1679757425832!5m2!1sen!2seg"
        width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
    </div>
    <div class="container">
      <br>
      <h2>Send Us a Message</h2>
      <form>
        <label for="name">Name</label>
        <input type="text" id="name" name="name" required>

        <label for="email">Email</label>
        <input type="email" id="email" name="email" required>

        <label for="message">Message</label>
        <textarea id="message" name="message" required></textarea>

        <button type="submit">Send</button>
      </form>
    </div>
  </div>


  <div id="footer">
    <p>&copy; 2023 Pavillion Architects. All rights reserved.</p>
  </div>

2

Answers


  1. You can give the id content a display flex and flex-direction: column.

        body {
      background-color: #ffffff;
      color: #000000;
      font-family: Arial, sans-serif;
      min-height: 1000px;
    }
    
    #header {
      background-color: #000000;
      padding: 10px;
      text-align: center;
    }
    
    #header h1 {
      color: #FFFFFF;
      margin-top: 10px;
      padding-top: 10px;
    }
    
    #navbar {
      background-color: #000000;
      overflow: hidden;
      margin: auto;
      width: auto;
      text-align: center;
    }
    
    #navbar a {
      position: relative;
      display: inline-block;
      color: #FFFFFF;
      text-align: center;
      padding: 14px 16px;
      text-decoration: none;
    }
    
    #navbar a:hover {
      background-color: #666666;
    }
    
    #content {
      display: flex;
      flex-direction: column;
      justify-content: center;
      margin-top: 20px;
      padding: 20px;
    }
    
    #about {
      margin-top: 20px;
      padding: 20px;
    }
    
    #footer {
      background-color: #000000;
      color: #ffffff;
      padding: 10px;
      text-align: center;
      position: fixed;
      bottom: 0;
      width: 100%;
    }
    
    label {
      display: block;
      margin-bottom: 10px;
    }
    
    input[type=text],
    input[type=email],
    textarea {
      width: 100%;
      padding: 12px 20px;
      margin: 8px 0;
      display: inline-block;
      border: 1px solid #ccc;
      box-sizing: border-box;
      font-size: 16px;
    }
    
    textarea {
      height: 150px;
    }
    
    input[type=text],
    input[type=password] {
      width: 100%;
      padding: 12px 20px;
      margin: 8px 0;
      display: inline-block;
      border: 1px solid #ccc;
      box-sizing: border-box;
      font-size: 16px;
    }
    
    button[type=submit] {
      background-color: #000000;
      color: #FFFFFF;
      padding: 12px 20px;
      border: none;
      border-radius: 4px;
      cursor: pointer;
      font-size: 16px;
    }
    
    button[type=submit]:hover {
      background-color: #666666;
    }
    
    .container {
      background-color: #FFFFFF;
      padding: 40px;
      border-radius: 10px;
      box-shadow: 0px 0px 10px #333333;
      width: 400px;
      margin: 0 auto;
      display: inline-block;
    }
    
    .contact-info {
      display: flex;
      justify-content: space-between;
      margin-top: 20px;
    }
    
    .contact-info div {
      flex-basis: calc(33.3% - 20px);
      margin: 0 10px;
    }
    
    .map-container {
      margin-top: 20px;
      position: relative;
      padding-bottom: 56.25%;
      height: 0;
      overflow: hidden;
    }
    
    .map-container iframe {
      position: absolute;
      display: inline-block;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
    }
    
    .contact-info-container {
      display: flex;
      justify-content: space-between;
      margin-top: 20px;
    }
    
    .contact-info-container div {
      flex-basis: calc(33.3% - 20px);
      margin: 0 10px;
    }
    
    .contact-info-container .map-container {
      flex-basis: 50%;
      margin-left: 10px;
    }
    <div id="header">
      <tr>
        <td><img src="pavillion.jpg" alt="Pavillion Logo" width="120px" height="120px"></td>
        <td>
          <h1>Pavillion Architects</h1>
        </td>
      </tr>
    
    </div>
    <div id="navbar">
      <a href="index.html">Home</a>
      <a href="about.html">About Us</a>
      <a href="login.html">Login</a>
      <a href="#">Contact Us</a>
    </div>
    <div id="content">
      <h2>Contact Us</h2>
      <div class="contact-info-container">
        <div>
          <h2>Contact Us</h2>
          <p><strong>Address:</strong><br>123 Main Street<br>New York, NY 10001<br>United States</p>
          <p><strong>Email:</strong><br>[email protected]</p>
          <p><strong>Phone:</strong><br>+1 (123) 456-7890</p>
        </div>
      </div>
        <br>
        <div class="map-container">
          <iframe src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d13807.244846734851!2d31.379021!3d30.0995927!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x145815dcc3e4e599%3A0xc13091367d1af2a3!2zUGF2aWxsaW9uIEFyY2hpdGVjdHMgUy5BLkUg2KjYp9mB2YrZhNmK2YjZhiDYp9ix2YPZitiq2YPYqtiz!5e0!3m2!1sen!2seg!4v1679757425832!5m2!1sen!2seg"
            width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
        </div>
        <div class="container">
          <br>
          <h2>Send Us a Message</h2>
          <form>
            <label for="name">Name</label>
            <input type="text" id="name" name="name" required>
    
            <label for="email">Email</label>
            <input type="email" id="email" name="email" required>
    
            <label for="message">Message</label>
            <textarea id="message" name="message" required></textarea>
    
            <button type="submit">Send</button>
          </form>
        </div>
    
    
      <div id="footer">
        <p>&copy; 2023 Pavillion Architects. All rights reserved.</p>
      </div>
    Login or Signup to reply.
  2. Remove the <br> tags. Where the first <br> tag was, put a closing </div> tag. Also move the <link> tag to inside the <head> tags.

    So the final html code looks like:

    <!DOCTYPE html>
    <html>
      <head>
        <title>Pavillion Architects</title>
        <link rel="stylesheet" href="style.css" />
      </head>
      <body>
        <div id="header">
          <tr>
            <td>
              <img
                src="pavillion.jpg"
                alt="Pavillion Logo"
                width="120px"
                height="120px"
              />
            </td>
            <td><h1>Pavillion Architects</h1></td>
          </tr>
        </div>
        <div id="navbar">
          <a href="index.html">Home</a>
          <a href="about.html">About Us</a>
          <a href="login.html">Login</a>
          <a href="#">Contact Us</a>
        </div>
        <div id="content">
          <h2>Contact Us</h2>
          <div class="contact-info-container">
            <div>
              <h2>Contact Us</h2>
              <p>
                <strong>Address:</strong><br />123 Main Street<br />New York, NY
                10001<br />United States
              </p>
              <p><strong>Email:</strong><br />[email protected]</p>
              <p><strong>Phone:</strong><br />+1 (123) 456-7890</p>
            </div>
          </div>
          <div class="map-container">
            <iframe
              src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d13807.244846734851!2d31.379021!3d30.0995927!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x145815dcc3e4e599%3A0xc13091367d1af2a3!2zUGF2aWxsaW9uIEFyY2hpdGVjdHMgUy5BLkUg2KjYp9mB2YrZhNmK2YjZhiDYp9ix2YPZitiq2YPYqtiz!5e0!3m2!1sen!2seg!4v1679757425832!5m2!1sen!2seg"
              width="600"
              height="450"
              style="border: 0"
              allowfullscreen=""
              loading="lazy"
              referrerpolicy="no-referrer-when-downgrade"
            ></iframe>
          </div>
          <div class="container">
            <h2>Send Us a Message</h2>
            <form>
              <label for="name">Name</label>
              <input type="text" id="name" name="name" required />
    
              <label for="email">Email</label>
              <input type="email" id="email" name="email" required />
    
              <label for="message">Message</label>
              <textarea id="message" name="message" required></textarea>
    
              <button type="submit">Send</button>
            </form>
          </div>
        </div>
    
        <div id="footer">
          <p>&copy; 2023 Pavillion Architects. All rights reserved.</p>
        </div>
      </body>
    </html>
    
    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search