Why are my footer nav menus overlapping the legal text to the right of them and how do I prevent that?
Question
I am not sure why my menu div is overlapping the legal ipsum when the page is made smaller? I've wrapped them in different coloured borders just to illustrate. Included is the HTML and CSS.
Right now I have it set to flexbox, space-between and the legal div has a fixed pixel width. I thought this was enough to have the flex children not overlap each other? What am I missing?
Any advice/help/guidance is very much appreciated. Thanks!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
@import url('https://fonts.googleapis.com/css2?family=Raleway:wght@500;700&display=swap');
body {
font-family: 'Raleway', sans-serif;
}
html {
font-size: 62.5%;
}
a {
text-decoration: none;
}
ul {
list-style: none;
}
.container {
max-width: 1200px;
width: 85%;
margin: 0 auto;
}
footer {
background: #F6F8FA;
}
.footer-logo {
font-size: 2rem;
}
.footer-wrapper {
height: 350px;
}
.footer-nav {
display: flex;
justify-content: space-between;
align-items: baseline;
}
.footer-menus {
display: flex;
position: relative;
left: 125px;
text-transform: uppercase;
line-height: 40px;
margin-top: 25px;
border: 2px solid chartreuse;
}
.footer-menus a {
color: #333333;
font-size: 1.9rem;
font-weight: 700;
}
.footer-links {
margin-right: 25px;
}
.social-links {
margin-right: 25px;
}
.legal {
width: 275px;
line-height: 30px;
color: #777777;
border: 2px solid peachpuff;
}
.thin-line {
border-bottom: 1px solid #777777;
}
footer p {
font-weight: 500;
color: 777777;
}
</style>
</head>
<body>
<footer>
<div class="container">
<div class="footer-wrapper">
<nav class="footer-nav">
<div class="footer-logo">
<h3>travel</h3>
</div>
<div class="footer-menus">
<ul class="footer-links">
<li><a href="#">home</a></li>
<li><a href="#">about</a></li>
<li><a href="#">blog</a></li>
<li><a href="#">contact</a></li>
</ul>
<ul class="social-links">
<li><a href="#">twitter</a></li>
<li><a href="#">facebook</a></li>
<li><a href="#">linkedin</a></li>
</ul>
</div>
<div class="legal">
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Expedita error temporibus quod
ipsam suscipit exercitationem possimus autem ad.</>
</div>
</nav>
<div class="thin-line"></div>
<p>Travel Agency</p>
</div>
</div>
</footer>
</body>
</html>
Here is a codepen: https://codepen.io/jmitchelreed/pen/MWeMBxd
1 answers
solution1
0 2020-11-21 23:20:26
It´s good practice to use comments to indicate where a closing tag for one of your elements are. This is mostly useful for when you have a lot of nested items, unorganized lists, divs, and anchor tags all in just one html, such as in your file. A HTML comment will not appear in your final design.
You can place them anywhere you like. Consider reading this
You have a problem with your closing nav element, its beyond the closing tag for your div element with the class of "legal".
</head>
<body>
<footer>
<div class="container">
<div class="footer-wrapper">
<nav class="footer-nav">
<div class="footer-logo">
<h3>travel</h3>
</div> <!-- Footer logo end -->
<div class="footer-menus">
<ul class="footer-links">
<li><a href="#">home</a></li>
<li><a href="#">about</a></li>
<li><a href="#">blog</a></li>
<li><a href="#">contact</a></li>
</ul>
<ul class="social-links">
<li><a href="#">twitter</a></li>
<li><a href="#">facebook</a></li>
<li><a href="#">linkedin</a></li>
</ul>
</div> <!-- Footer menu end -->
</nav> <!-- Navbar end -->
<div class="legal">
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Expedita error temporibus quod
ipsam suscipit exercitationem possimus autem ad.</>
</div> <!--- Legal end -->
<div class="thin-line"></div> <!-- Unless this was intended, there is an extra closing div tag in here -->
<p>Travel Agency</p>
</div> <!-- Should this be the closing tag for the "Thin line" class? -->
</div> <!-- Container end -->
</footer> <!-- footer end -->
</body>
</html>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.