How do I sort the content of the webpage under each other? - Html

Mhegazy
March 26, 2023
112 views
0 votes
2 Answers

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>

Tags: css html

Answers

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>

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>

Please signup or login to give your own answer.

Click here to cancel reply.

How do I sort the content of the webpage under each other? – Html

Answers