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>© 2023 Pavillion Architects. All rights reserved.</p>
</div>
2
Answers
You can give the id content a display flex and flex-direction: column.
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: