Почему div не начинается с новой строки?

Question

Всем привет. Не пойму, почему div с классом footer не отображается с новой строки, а растягивается на большую часть страницы?? Для наглядности сделал рамку 1 пиксель.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500&display=swap" rel="stylesheet">
    <title>Portfolio</title>
    <link href="css/style.css" type="text/css" rel="stylesheet">
</head>
<body>
    <div class="btn-change-theme">
        <button class="btn-top">
            <img src="img/Medium Brightness.svg" alt="Переключить режим">
        </button>
    </div>

    <div class="profile-info">
        <div class="profile-picture"></div> 
        <div class="profile-description">
            <span class="name">Victor Alvarado</span>
            <br />
            <span class="name2">Software Engineer</span>
            <table>
                <tr>      
                    <td>
                        <img src="img/github.png" alt="github">
                    </td>
                    <td>
                        <img src="img/twitter.png" alt="twitter">
                    </td>
                    <td>
                        <img src="img/linkedin.png" alt="linkedin">
                    </td>
                    <td>
                        <img src="img/youtube.png" alt="youtube">
                    </td>
                </tr>
            </table>
        </div>
    </div>

    <div class="profile-facts">
        <table class="profile-facts">
            <tr class="facts">
                <td>7<br />Years of work experience</td>
                <td>50+<br /> Completed projects</td>
                <td>20+<br /> Satisfied customers</td>
            </tr>
        </table>
    </div>

    <div class="profile-buttons">
        <a class="download" href="#">Download CV</a>
        <a class="contact" href="#">Contact me</a>
    </div>

    <div class="tabsbtn">
        <button class="button">Portfolio</button>
        <button class="skills">Skills</button>
    </div>

    <div class="content">
        <img src="img/Group 3.png" alt="group" style="float:left; margin-bottom: 30px">
        <img src="img/Group 4.png" alt="group" style="float:right; margin-bottom: 30px;">
        <img src="img/Group 5.png" alt="" style="float:right; margin-bottom: 30px;">
        <img src="img/Group 6.png" alt="" style="float:left; margin-bottom: 30px;">
        <img src="img/Group 7.png" alt="" style="float:right; margin-bottom: 30px;">
        <img src="img/Group 8.png" alt="" style="float:left;">
    </div>

    <div class="footer">
         <p>Victor Alvarado. 2022 All rigths reserved</p>
    </div>
    
</body>
</html>

css стиль для этого дива:

body {
    background-color: #E5E5E5;
    font-family: 'Poppins', sans-serif;
    }

.btn-change-theme {
    width: 80px;
    margin: 0 auto 0 auto;
    }

.btn-top {
    margin: 0 auto 0 auto;
    padding: 0 0;
    border: 5px;
    border-radius: 50%;
    width: 80px;
    height: 80px;
    box-shadow: 0 5px 5px #db7878;
    }

.profile-info {
    width: 631px;
    height: 215px;
    margin: 40px auto 40px auto;
    padding: 0 0;
}

.profile-picture {
    background-image: url(../img/profile-picture.png);
    background-repeat: no-repeat;
    background-position: center;
    float: left;
    width: 215px;
    height: 222px;
}

div.profile-description {
    width: 372px;
    margin: 38px 0 38px 0;
    float: right;
    display: inline-block;
}

span.name {
    font-size: 36px;
    color: #3D3D3D;
    text-align: left;
    vertical-align: text-top;
}

span.name2 {
    font-size: 22px;
    color: #3D3D3D;
    text-align: left;
    vertical-align: middle;
}

div.profile-facts {
    width: 634px;
    padding: 20px 2px 20px 2px;
    margin-left: auto;
    margin-right: auto;
    font-size: 24px;
    text-align: center;
}

.profile-buttons {
    width: 618px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 50px;
}
.download { 
    width: 290px;
    height: 80px;
    float: left;
    text-align: center;
    text-decoration: none;
    font-size: 22px;
    background-color: #FBD144;
    color: #3D3D3D;
    border-radius: 10px;
    line-height: 80px;
    font-weight: 500;
}
.contact {
    width: 290px;
    height: 80px;
    float: right;
    text-align: center;
    text-decoration: none;
    font-size: 22px;
    background-color: #FFFFFF;
    color: #3D3D3D;
    border-radius: 10px;
    line-height: 80px;
    font-weight: 500;
}
.tabsbtn {
    max-width: 760px;
    padding-left: 24px;
    padding-top: 20px;
    padding-bottom: 20px;
    margin-top: 180px;
    margin-left: auto;
    margin-right: auto;
    background-color: #FFFFFF;
    border-radius: 20px;
}
.button {
    width: 350px;
    height: 80px;
    background-color: #D7D7D7;
    font-size: 22px;
    font-weight: 700;
    text-align: center;
    border-radius: 10px;
    border: 0;
}
.skills {
        width: 385px;
        height: 80px;
        background-color: #FFFFFF;
        font-size: 22px;
        font-weight: 700;
        text-align: center;
        border-radius: 10px;
        border: 0;
}
.content {
    max-width: 757px;
    margin-top: 55px;
    margin-left: auto;
    margin-right: auto;
}
div.footer {
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    font-size: 22px;
    font-weight: 500;
    color: #575757;
    border: 1px solid red;
}

И вот скрин, что получается в итоге:

Answer 1

попробуйте принудительно сделать вот так в index.html

<div class="footer">
    <nobr>Victor Alvarado. 2022 All rigths reserved</nobr>
</div>

Answer 2

У тебя проблема с float, из-за этого пропадает высота у блока class="content"

добавить такую строчку после данного блока

<div style="clear:both"></div>`

вот скрин

https://pastenow.ru/ea23686108fc23d05d45a7e9b158ea46

Answer 3

Переверстал немного ваш шаблон

html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500&display=swap" rel="stylesheet">
    <title>Portfolio</title>
    <link href="css/style.css" type="text/css" rel="stylesheet">
</head>

<body>
    <div class="btn-change-theme">
        <button class="btn-top">
            <img src="img/Medium Brightness.svg" alt="Переключить режим">
        </button>
    </div>

    <div class="profile-info">
        <div class="profile-picture"></div>
        <div class="profile-description">
            <div class="profile-name">
                <p class="name">Victor Alvarado</p>
                <p class="prof">Software Engineer</p>
            </div>

            <ul class="links">
                <li><img src="img/github.png" alt="github"></li>
                <li><img src="img/twitter.png" alt="twitter"></li>
                <li><img src="img/linkedin.png" alt="linkedin"></li>
                <li><img src="img/youtube.png" alt="youtube"></li>
            </ul>
        </div>
    </div>

    <div class="profile-facts">
        <ul>
            <li>7<br>Years of work experience</li>
            <li>50+<br>Completed projects</li>
            <li>20+<br>Satisfied customers</li>
        </ul>
    </div>

    <div class="profile-buttons">
        <a class="download" href="#">Download CV</a>
        <a class="contact" href="#">Contact me</a>
    </div>

    <div class="tabsbtn">
        <button class="button">Portfolio</button>
        <button class="skills">Skills</button>
    </div>

    <div class="content">
        <div class="content_lines">
            <div class="line">
                <img src="img/Group 3.png">
                <img src="img/Group 4.png">
            </div>
            <div class="line">
                <img src="img/Group 5.png">
                <img src="img/Group 6.png">
            </div>
            <div class="line">
                <img src="img/Group 7.png">
                <img src="img/Group 8.png">
            </div>
        </div>
    </div>

    <div class="footer">
        <p>Victor Alvarado. 2022 All rigths reserved</p>
    </div>


</body>

</html>

css

* {
    margin: 0;
    padding: 0;
}

body {
    background-color: #E5E5E5;
    font-family: 'Poppins', sans-serif;
}

.btn-change-theme {
    width: 80px;
    margin: 0 auto 0 auto;
}

.btn-top {
    margin: 0 auto 0 auto;
    padding: 0 0;
    border: 5px;
    border-radius: 50%;
    width: 80px;
    height: 80px;
    box-shadow: 0 5px 5px #db7878;
}

.profile-info {
    display: flex;
    padding-top: 35px;
    align-items: center;
    justify-content: center;
}

.profile-picture {
    background-image: url(../img/profile-picture.png);
    background-repeat: no-repeat;
    background-position: center;
    width: 215px;
    height: 222px;
}

.profile-description {
    padding-left: 50px;
}

p.name {
    font-size: 36px;
    color: #3D3D3D;
}

p.prof {
    font-size: 22px;
    color: #3D3D3D;
}

.profile-info .links {
    list-style: none;
    display: flex;
}

.links li {
    padding-right: 5px;
}

.profile-facts ul {
    display: flex;
    font-size: 24px;
    text-align: center;
    list-style: none;
    margin-top: 50px;
    justify-content: center;
}

.profile-facts ul li {
    width: 220px;
}

.profile-buttons {
    display: flex;
    margin-top: 50px;
    justify-content: center;
}

.download {
    width: 290px;
    height: 80px;
    text-align: center;
    text-decoration: none;
    font-size: 22px;
    background-color: #FBD144;
    color: #3D3D3D;
    border-radius: 10px;
    line-height: 80px;
    font-weight: 500;
    margin-left: 50px;
}

.contact {
    height: 80px;
    text-align: center;
    text-decoration: none;
    font-size: 22px;
    background-color: #FFFFFF;
    color: #3D3D3D;
    border-radius: 10px;
    line-height: 80px;
    font-weight: 500;
    margin-left: 100px;
}

.tabsbtn {
    margin: 50px 0;
    display: flex;
    border-radius: 20px;
    justify-content: center
}

.button {
    height: 80px;
    width: 362px;
    background-color: #D7D7D7;
    font-size: 22px;
    font-weight: 700;
    text-align: center;
    border-radius: 10px;
    border: 0;
    margin-right: 15px;
}

.skills {
    height: 80px;
    width: 362px;
    font-size: 22px;
    font-weight: 700;
    text-align: center;
    border-radius: 10px;
    border: 0;
    margin-left: 15px;
}

.content {
    display: flex;
    justify-content: center;
    margin-top: 55px;
}

.content .content_lines .line img{
    padding: 0 15px 15px 15px;
}

.footer {
    text-align: center;
    font-size: 22px;
    font-weight: 500;
    color: #575757;
}

БЛОГ НА HUSL

Почему div не начинается с новой строки?

Ответы (3 шт):