Почему контентная часть все еще налазит на footer ?
* {
box-sizing: border-box;
margin: 0;
padding: 0;
font-family: Helvetica, sans-serif;
}
body {
-webkit-font-smoothing: antialiased;
font-size: 16px;
line-height: 1.42;
background-color: #f6f6f6;
}
html, body {
width: 100%;
height: 100%;
}
.wrapper {
min-height: 100%;
overflow: hidden;
position: relative;
min-width: 940px + 20px;
}
ul {
padding: 0;
margin: 0;
}
li {
list-style: none;
}
a {
text-decoration: none;
color: black;
}
.clearfix {
content: '';
clear: both;
display: block;
}
/* ------------- HEADER ------------- */
.container {
position: relative;
width: 940px;
margin: 0 auto;
}
.header {
display: flex;
flex-direction: row;
box-shadow: 0px 2px 5px -0px rgba(0,0,0,0.1);
height: 60px;
margin-bottom: 25px;
background-color: #fff;
}
/* ------------- HEADER - left ------------- */
.header__left {
width: 50%;
}
.user {
display: flex;
align-items: center;
height: 60px;
cursor: pointer;
}
.user__avatar {
display: flex;
align-items: center;
margin-right: 15px;
}
.user__avatar-pic {
width: 50px;
height: 50px;
border-radius: 50%;
border: 2px solid #cccccc;
}
.user__name {
display: inline-block;
max-width: 200px;
}
/* ------------- HEADER - right ------------- */
.header__right {
width: 45%;
}
.contacts {
position: absolute;
right: 0;
top: 10px;
cursor: pointer;
}
.contacts__link {
text-decoration: none;
font-size: 16px ;
color: #33c1e3;
font-weight: bold;
padding: 10px;
background-color: white;
border: none;
font-family: Helvetica, sans-serif;
}
.dropdown {
position: absolute;
display: none;
top: 35px;
color: white;
right: -35px;
z-index: 1;
background-color: white;
border: 1px solid silver;
}
.dropdown:before {
display: block;
content: "";
position: absolute;
right: 0;
left: 0;
height: 50px;
top: -50px;
/* border: 1px solid red; */
}
.dropdown__item {
padding: 5px;
width: 150px;
}
.contacts span {
border-bottom: 2px dotted #33c1e3;
}
.dropdown__item-link {
color: #33c1e3;
}
.contacts:hover .dropdown {
display: inline-block;
}
.dropdown .fas, .fab {
color: #33c1e3;
display: inline-block;
margin-right: 5px;
}
/* .triangle {
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-bottom: 10px solid black;
width: 0;
height: 0;
top: 100%;
left: 50%;
margin-left: -20px;
position: absolute;
}
.triangle:before {
content: "";
display: block;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-bottom: 10px solid black;
width: 0;
height: 0;
position: absolute;
left: -30px;
top: -31px;
} */
/* ------------- sidebar ------------- */
.main-left {
float: left;
width: 160px;
text-align: right;
}
.main-right {
float: right;
width: 720px;
border: 2px solid green;
}
.about__left {
float: left;
width: 200px;
}
.about__right {
float: right;
width: 470px;
border: 2px solid green;
position: relative;
}
.about__pic_link {
border-radius: 10px;
width: 200px;
height: 200px;
border: 2px solid white;
object-fit: cover;
transition: .7s;
}
.about__pic_link:hover {
border: 2px solid #2962ff;
transition: .7s;
cursor: pointer;
height: 300px;
}
.nav__link {
padding: 10px;
display: block;
border-right: 4px solid transparent;
transition: .3s;
}
.nav__link:hover {
border-right: 4px solid #33c1e3;
color: #33c1e3;
}
.nav__list .fas {
margin-right: 10px;
}
/* ------------- main right ------------- */
.about__right {
}
.about-title {
font-size: 25px;
margin-bottom: 10px;
}
.about__desc {
}
.fa-download {
margin-right: 6px;
color: #ff3632;
transition: 0.4s;
}
.about-btn:hover {
background-color: #ff3632;
border-radius: 22px;
padding: 6px 22px;
border: 2px solid #ff3632;
color: white;
transition: 0.4s;
}
.about-btn:hover .fa-download {
margin-right: 6px;
color: white;
transition: 0.4s;
}
.about__right {
// background-color: red;
width: 490px;
display: flex;
flex-direction: column;
justify-content: right;
align-items: flex-end;
}
.job-item {
right: 0;
background-color: white;
padding: 10px;
border-radius: 7px;
width: 350px;
text-align: left;
color: grey;
box-shadow: -1px 2px 10px 0px rgba(0,0,0,0.1);
transition: 0.6s;
margin-bottom: 20px;
position: relative;
}
* {
box-sizing: border-box;
}
ul {
list-style: none;
}
.career__list {
// display: flex;
// align-items: center;
// justify-content: center;
}
.career__item {
text-align: right;
margin-bottom: 20px;
}
.career__item:first-child .career__block:before {
display: none;
}
.career__item:last-child .career__block:after {
display: none;
}
.career__block {
width: 300px;
border: 1px solid black;
display: inline-block;
position: relative;
text-align-last: left;
}
//line
.career__block:before {
content: "";
display: block;
width: 1px;
background: grey;
position: absolute;
left: -30px;
top: -20px; // 22 - для універсальної обводки крапки. А так так можна значення 0
bottom: 50%;
//dot's border
margin-bottom: 10px;
}
.career__block:after {
content: "";
display: block;
width: 1px;
background: grey;
position: absolute;
left: -30px;
top: 50%;
bottom: -22px; // 22 - для універсальної обводки крапки. А так так можна значення 0
//dot's border
margin-top: 10px;
}
// year
.career__year {
position: absolute;
left: -75px;
top: 50%;
right: 100%;
margin-right: 39px;
line-height: 30px;
margin-top: -15px;
}
// dot
.career__year:after {
content: "";
width: 10px;
height: 10px;
background: #33c1e3;
border-radius: 50%;
position: absolute;
top: 50%;
right: -15px;
margin-top: -5px;
z-index: 2;
}
/* ------------- footer ------------- */
.wrapper:after {
content: " ";
height: 50px;
display: block;
}
.footer {
background-color: #414141;
box-shadow: 2px 1px 7px 3px rgba(0,0,0,0.1);
margin-top: -50px;
height: 50px;
}
.footer-left {
float: left;
}
.footer-right {
float: right;
height: 50px;
display: flex;
align-items: center;
justify-content: center;
}
.copyright {
height: 50px;
display: flex;
align-items: center;
justify-content: center;
}
.copyright-text {
font-size: 14px;
color: grey;
}
.socials-item {
display: inline-block;
}
.socials-item_link {
}
.footer-right .fab {
background-color: #fff;
border-radius: 50%;
padding: 8px;
color: #414141;
background-color: grey;
transition: 0.3s;
align-items: center;
justify-content: center;
}
.footer-right .fab:hover {
background-color: #448aaf;
transition: 0.3s;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" integrity="sha512-Fo3rlrZj/k7ujTnHg4CGR2D7kSs0v4LLanw2qksYuRlEzO+tcaEPQogQ0KaoGN26/zrn20ImR1DfuLWnOo7aBA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<div class="wrapper">
<div class="maincontent">
<!---------- HEADER ---------->
<header class="header">
<div class="container">
<div class="header__left">
<div class="user">
<div class="user__avatar">
<img class="user__avatar-pic" src="https://www.linkpicture.com/q/Screenshot_1_198.png" alt="">
</div>
<div class="user__name">Yaroslav Prokhorenko</div>
</div>
</div>
<div class="header__right">
<div class="contacts">
<button class="contacts__link" href="#"><span>my contacts </span></button>
<ul class="dropdown">
<div class="triangle"></div>
<li class="dropdown__item">
<p class="dropdown__item-link"><i class="fas fa-envelope"></i>sample@email</p>
</li>
<li class="dropdown__item">
<p class="dropdown__item-link"><i class="fas fa-phone-alt"></i>+380 546 5345</p>
</li>
<li class="dropdown__item">
<p class="dropdown__item-link"><i class="fab fa-skype"></i>sample</p>
</li>
</ul>
</div>
</div>
</div>
</header>
<div class="content">
<div class="container ">
<!---------- main left ---------->
<div class="main-left">
<nav class="nav">
<ul class="nav__list">
<li class="nav__item nav__item_active"><a href="#" class="nav__link"><i class="fas fa-user-secret"></i>About Me</a></li>
<li class="nav__item"><a href="#" class="nav__link"><i class="fas fa-rocket"></i>Career</a></li>
<li class="nav__item"><a href="#" class="nav__link"><i class="fas fa-briefcase"></i>Portfolio</a></li>
</ul>
</nav>
</div>
<!---------- main right --------->
<div class="main-right">
<div class="about">
<div class="about-title">
Career
</div>
<div class="about__left">
<div class="about__pic">
<img class="about__pic_link" src="https://www.linkpicture.com/q/ed-ward-zcABf34bdpY-unsplash.jpg" alt="">
</div>
</div>
<div class="about__right">
<ul class="career__list">
<li class="career__item">
<div class="career__block">
<div class="career__title">
Kyiv National University
</div>
<div class="career__occ">
Group Leader Assistant
</div>
<div class="career__date">
2010-2015
</div>
<div class="career__year">
2015
</div>
</div>
</li>
<li class="career__item">
<div class="career__block">
<div class="career__title">
Kyiv National University
</div>
<div class="career__occ">
Group Leader Assistant
</div>
<div class="career__date">
2010-2015
</div>
<div class="career__year">
2015
</div>
</div>
</li>
<li class="career__item">
<div class="career__block">
<div class="career__title">
Kyiv National University
</div>
<div class="career__occ">
Group Leader Assistant
</div>
<div class="career__date">
2010-2015
</div>
<div class="career__year">
2015
</div>
</div>
</li>
<li class="career__item">
<div class="career__block">
<div class="career__title">Kyiv National University</div>
<div class="career__occ">Group Leader Assistant</div>
<div class="career__date">2010-2015</div>
<div class="career__year">2015</div>
</div>
</li>
<li class="career__item">
<div class="career__block">
<div class="career__title">
Kyiv National University
</div>
<div class="career__occ">
Group Leader Assistant
</div>
<div class="career__date">
2010-2015
</div>
<div class="career__year">
2015
</div>
</div>
</li>
<li class="career__item">
<div class="career__block">
<div class="career__title">
Kyiv National University
</div>
<div class="career__occ">
Group Leader Assistant
</div>
<div class="career__date">
2010-2015
</div>
<div class="career__year">
2015
</div>
</div>
</li>
<li class="career__item">
<div class="career__block">
<div class="career__title">
Kyiv National University
</div>
<div class="career__occ">
Group Leader Assistant
</div>
<div class="career__date">
2010-2015
</div>
<div class="career__year">
2015
</div>
</div>
</li>
<li class="career__item">
<div class="career__block">
<div class="career__title">
Kyiv National University
</div>
<div class="career__occ">
Group Leader Assistant
</div>
<div class="career__date">
2010-2015
</div>
<div class="career__year">
2015
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<footer class="footer">
<div class="container clearfix">
<div class="footer-left">
<div class="copyright">
<p class="copyright-text"> © Design was created in SampleSchool </p>
</div>
</div>
<div class="footer-right">
<ul class="socials">
<li class="socials-item"><a class="socials-item_link" href="#"><i class="fab fa-facebook"></i></a></li>
<li class="socials-item"><a class="socials-item_link" href="#"><i class="fab fa-instagram"></i></a></li>
<li class="socials-item"><a class="socials-item_link" href="#"><i class="fab fa-twitter"></i></a></li>
</div>
</div>
</footer>
overflow: hidden;
у.wrapper
margin-top: -50px;
у.footer
?overflow: hidden
в.container