Html Question posted in
Some basic documentation can be found here.

Html – Same "margin-top" & "margin-bottom" for flexible and fixed Containers

I’m working on a test website right now to play around with the things I learned in HTML and CSS.
My goal this time was to create a container two other seperated left and right.
The left container is supposed to be fixed and the right one shall stretch depending of the content.

I’d like to have a margin-top and margin-bottom for both of them so the design is consistent throughout all the different browsers.

This is what I have so far:

HTML Code

!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Phillipp Dittloff</title>
    <link href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="style.css">
</head>
<body>

<div class="wrapper">

    <div class="content-left">
        <h1>Phillipp Dittloff</h1>
        <h2>Frontend Developer</h2>
        <p>I create beautiful experiences<br> for customers.</p>
        <br>
        <br>
        <ul class="nav">
            <li><a href="#about">About</a></li>
            <li><a href="#experience">Experience</a></li>
            <li><a href="#projects">Projects</a></li>
            <li><a href="#contact">Contact</a></li>
        </ul>
        
        <ul class="sm-links">
            <li><a href="https://github.com/phillippdi" target="_blank" rel="noreferrer"><i class="fa-brands fa-github"></i></a></li>
            <li><a href="https://de.linkedin.com/in/phillipp-dittloff-a587402b3" target="_blank" rel="noreferrer"><i class="fa-brands fa-linkedin"></i></a></li>
            <li><a href="#" target="_blank" rel="noreferrer"><i class="fa-brands fa-instagram"></i></a></li>
        </ul>

    </div>

    <div class="content-right">
        

        <div id="about">
            <h2 class="mq-headline">About</h2>
            <p>
                In 2023, everything started out of little curiosity in HTML & CSS. I've gained a lot of knowledge through Online Qualifications and plenty of Udemy Courses. My knowledge so far includes things like <span class="highlight">HTML & CSS and a little JavaScript</span> so far.
                <br>
                <br>
                My goal is to become a fullstack developer although my main focus will be on the frontend part, since my passion is designing and creating beautiful web surfaces for customers. I most enjoy creating a website which is in balance with both, design and code. In my free time, I find new ways to enhance my knowledge as a frontend developer in many ways, such as rebuilding fun themes, etc.
                <br>
                <br>
                When I'm not on the computer, I'm usually hanging out with my family, reading, run after my cats after they did something 🙀 or playing some video games.
            </p>
        </div>

        <div id="experience">
            <h2 class="mq-headline">Experience</h2>
            <ul>
                <li>
                    <a class="exp-box">
                        <div class="box-left">
                            <span class="period">2021 - 2022</span>
                        </div>
                        <div class="box-right">
                            <h3>Bachelor Professional - Business Management</h3>
                            <p>
                                Successfully graduated my bachelor professional in business management focusing on IT-processes.
                            </p>
                        </div>
                    </a>
                </li>

                <li>
                    <a class="exp-box">
                        <div class="box-left">
                            <span class="period">2016 - 2017</span>
                        </div>
                        <div class="box-right">
                            <h3>Apprenticeship - IT Systems Electrician</h3>
                            <p>
                                Successfully graduated my Apprenticeship in IT Systems Electronics focusing on IT Hardware such as servers, circuits.
                            </p>
                        </div>
                    </a>
                </li>

                <li>
                    <a class="exp-box">
                        <div class="box-left">
                            <span class="period">2012 - present</span>
                        </div>
                        <div class="box-right">
                            <h3>Master Sergeant - Military Career</h3>
                            <p>
                            Administrating high-frequency radio transmissions in combination with other sources. Work as a leader with personal to manage processes in work.
                            </p>
                        </div>
                    </a>
                </li>

                <li>
                    <a class="exp-box">
                        <div class="box-left">
                            <span class="period">2007 - 2012</span>
                        </div>
                        <div class="box-right">
                            <h3>Extended Secondary School Qualification</h3>
                            <p>
                                Successfully graduated at school before starting my work career.
                            </p>
                        </div>
                    </a>
                </li>
            </ul>

        </div>

        <div id="projects">
            <h2 class="mq-headline">Projects</h2>
            <ul>

                <li>
                    <a class="project-box">
                        <div class="project-img">
                            <img src="placeholder-image.jpg" alt="placeholder-image">
                        </div>
                        <div class="project-description">
                            <h3>Example Project</h3>
                            <p>
                                Lorem ipsum, dolor sit amet consectetur adipisicing elit. Non vero amet consequatur in veritatis minima at possimus, quis tenetur corporis ut adipisci ipsa.
                            </p>
                        </div>
                    </a>
                </li>

                <li>
                    <a class="project-box">
                        <div class="project-img">
                            <img src="placeholder-image.jpg" alt="placeholder-image">
                        </div>
                        <div class="project-description">
                            <h3>Example Project</h3>
                            <p>
                                Lorem ipsum, dolor sit amet consectetur adipisicing elit. Non vero amet consequatur in veritatis minima at possimus, quis tenetur corporis ut adipisci ipsa.
                            </p>
                        </div>
                    </a>
                </li>

                <li>
                    <a class="project-box">
                        <div class="project-img">
                            <img src="placeholder-image.jpg" alt="placeholder-image">
                        </div>
                        <div class="project-description">
                            <h3>Example Project</h3>
                            <p>
                                Lorem ipsum, dolor sit amet consectetur adipisicing elit. Non vero amet consequatur in veritatis minima at possimus, quis tenetur corporis ut adipisci ipsa.
                            </p>
                        </div>
                    </a>
                </li>

                <li>
                    <a class="project-box">
                        <div class="project-img">
                            <img src="placeholder-image.jpg" alt="placeholder-image">
                        </div>
                        <div class="project-description">
                            <h3>Example Project</h3>
                            <p>
                                Lorem ipsum, dolor sit amet consectetur adipisicing elit. Non vero amet consequatur in veritatis minima at possimus, quis tenetur corporis ut adipisci ipsa.
                            </p>
                        </div>
                    </a>
                </li>
            </ul>
        </div>

        <div id="contact">
            <h2 class="mq-headline">Contact</h2>
            <form>      
                <input name="name" type="text" class="feedback-input" placeholder="Name" />   
                <input name="email" type="text" class="feedback-input" placeholder="Email" />
                <textarea name="text" class="feedback-input" placeholder="Comment"></textarea>
                <input type="submit" value="SUBMIT"/>
            </form>
        </div>


        <!-- Footer -->

        <div id="footer">

            <footer>
                <ul>
                    <li><a href="#">Privacy Policy</a></li>
                    <li><a href="#">Legal Notice</a></li>
                </ul>
            </footer>
            <p>© 2024 Phillipp Dittloff</p>

        </div>

    </div>

</div>


<script src="https://kit.fontawesome.com/f40fa953b8.js" crossorigin="anonymous"></script>

</body>
</html>

CSS Code

/* Main Styling */

:root {
    --p-color: #94A3B8;
    --h-color: #E2E8F0;
    --a-color: #94A3B8;
    --i-color: #94A3B8;
    --a-hover-color: #E2E8F0;
    --hlt-color: #E2E8F0;
    --period-color: #94A3B8;
}

html {
    scroll-behavior: smooth;
}

* {
    margin: 0;
    padding: 0;
}

body {
    height: 100vh;
    margin-top: 100px;
    background: linear-gradient(300deg,#0f4c75,#1b262c,#0f4c75);
    background-size: 180% 180%;
    animation: gradient-animation 27s ease infinite;
    background-attachment: fixed;
    font-family: "Poppins", sans-serif;
    display: flex;
    justify-content: center;
}

@keyframes gradient-animation {
    0% {
    background-position: 0% 50%;
    }
    50% {
    background-position: 100% 50%;
    }
    100% {
    background-position: 0% 50%;
    }
}

.wrapper {
    width: 60%;
    display: grid;
    gap: 10px;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(auto-fill, 100px);
}

h1 {
    font-size: 3rem;
    color: var(--h-color);
}

h2 {
    font-size: 1.3rem;
    font-weight: 500;
    color: var(--h-color);
}

h3 {
    color: var(--h-color);
}

p {
    font-size: 1rem;
    color: var(--p-color);
}

a {
    cursor: pointer;
}

.mq-headline {
    margin-bottom: 30px;
    display: none;
}

/* Left Content */

.content-left {
    grid-area: 1 / 1 / 4 / 2;
    position: fixed;
    display: block;
}

.content-left h2 {
    margin-bottom: 15px;
}

.nav {
    list-style: none;
    margin-bottom: 22rem;
}

.nav a {
    text-decoration: none;
    color: var(--a-color);
    transition: 0.2s;
}

ul li a:hover {
    color: var(--a-hover-color);
}

.sm-links {
    list-style: none;
    display: flex;
    gap: 25px;
}

.sm-links i {
    color: var(--i-color);
    font-size: 25px;
    transition: 0.2s;
}

.sm-links i:hover {
    color: var(--a-hover-color);
}

/* Right Content */

.content-right {
    grid-area: 1 / 2 / auto / 3;
    margin: 0;
    padding: 0;
}

/* About Styling */

#about {
    margin-bottom: 100px;
    scroll-margin-top: 100px;
}

.highlight {
    font-weight: 500;
    color: var(--hlt-color);
}

/* Experience Styling */

#experience {
    margin-bottom: 200px;
    scroll-margin-top: 100px;
}

#experience ul {
    list-style: none;
}

.exp-box {
    display: grid;
    grid-template-columns: repeat(8, minmax(0, 1fr));
    grid-template-rows: auto;
    gap: 10px;
    margin-bottom: 4rem;
}

.box-left {
    grid-column: 1 / 3;
}

.period {
    font-size: 1rem;
    font-weight: 300;
    color: var(--period-color);
}

.box-right {
    grid-column: 3 / 10;
}

h3 {
    margin-bottom: 5px;
    font-size: 1rem;
    font-weight: 500;
}

.box p {
    font-size: 0.8rem;
}

/* Projects Styling */

#projects {
    margin-bottom: 200px;
    scroll-margin-top: 100px;
}

#projects ul {
    list-style: none;
}

#projects ul li {
    margin-bottom: 4rem;
}

.project-box {
    display: grid;
    grid-template-columns: repeat(8, minmax(0, 1fr));
    gap: 10px;
    border-radius: 15px;
    transition: 0.3s;
    margin-bottom: 4rem;
}

.project-img {
    grid-column: 1 / 3;
}

.project-img img {
    grid-column: 1 / 3;
    width: 100%;
    border-radius: 15px;
    object-fit: cover;
}

.project-description {
    grid-column: 3 / 9;
}

.project-description p {
    font-size: 0.8rem;
}

/* Form Styling */

#contact {
    padding-bottom: 200px;
    scroll-margin-top: 100px;
    display: flex;
    align-items: start;
}

form { 
    max-width:320px;
    align-self: self-start;
}

.feedback-input {
    font-family: "Poppins", sans-serif;
    font-weight: 300;
    color: var(--p-color);
    font-size: 1rem;
    border-radius: 15px;
    line-height: 22px;

    /* Opacity Background */
    background: rgba(15, 76, 117, 0.15);
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    border: 1px solid rgba(15, 76, 117, 0.3);

    transition: all 0.3s;
    padding: 13px;
    margin-bottom: 15px;
    width:100%;
    box-sizing: border-box;
    outline:0;
}

.feedback-input:focus { border:2px solid #fff; }

textarea {
    height: 150px;
    line-height: 150%;
    resize:vertical;
}

[type="submit"] {
    font-family: "Poppins", sans-serif;
    width: 100%;
    background:#0F4C75;
    border-radius:5px;
    border:0;
    cursor:pointer;
    color:#BBE1FA;
    font-size:24px;
    padding-top:10px;
    padding-bottom:10px;
    transition: all 0.3s;
    margin-top:-4px;
    font-weight:500;

    /* Box Shadow Effect */
    -webkit-box-shadow: 5px 5px 14px -3px rgba(0,0,0,0.25); 
    box-shadow: 5px 5px 14px -3px rgba(0,0,0,0.25);
}

[type="submit"]:hover { background:#3282B8; }


/* Footer Styling */

#footer {
    padding-bottom: 80px;
}

footer {
    margin-bottom: 10px;
}

footer ul {
    list-style: none;
    display: flex;
    justify-content: start;
    flex-wrap: wrap;
    gap: 25px;
}

footer ul li a {
    text-decoration: none;
    color: var(--a-color);
    transition: 0.3s;
    font-size: 0.9rem;
    font-weight: 500;
}

footer ul li a:hover {
    color: var(--a-hover-color);
}

/* Media Queries */

@media (max-width: 480px) {

    body {
        margin-top: 25px;
    }

    h1 {
        font-size: 2rem;
        color: var(--h-color);
    }

    h2 {
        font-size: 1rem;
        font-weight: 500;
        color: var(--h-color);
    }

    p {
        font-size: 0.9rem;
        color: var(--p-color);
    }

    .mq-headline {
        display: block;
    }

    .wrapper {
        width: 90%;
        display: flex;
        flex-direction: column;
        gap: 10px;
        grid-template-columns: none;
        grid-template-rows: none;
    }

    .content-left {
        grid-area: none;
        position:unset;
        display: block;
        margin-bottom: 100px;
    }

    .content-left br {
        display: none;
    }

    .nav {
        display: none;
    }

    .sm-links {
        margin-top: 25px;
    }

    .exp-box {
        display: flex;
        flex-direction: column;
        grid-template-columns: none;
        grid-template-rows: none;
        gap: 10px;
        margin-bottom: 4rem;
    }

    .period {
        font-size: 0.8rem;
        font-weight: 300;
        color: var(--period-color);
    }
    
    h3 {
        margin-bottom: 5px;
        font-size: 0.9rem;
        font-weight: 500;
    }
    
    .exp-box p {
        font-size: 0.9rem;
    }

    #contact {
        padding-bottom: 200px;
        scroll-margin-top: 100px;
        display: flex;
        flex-direction: column;
    }

    form { 
        max-width:100%;
        align-self: self-start;
    }

    #footer {
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        padding-bottom: 25px;
    }

    }

So far I tried to set of course a "margin-bottom: 100px" for the .content-right without any success.

Another thing I tried is to wrap the .wrapper in another container to set up the margin-top and margin-bottom without success.

Also I was trying to set the margin-bottom on the body since margin-top: 100px on the body is working.

I hope that maybe one of you can see what I don’t and help me!

Kind regards!

UTINNI 🙂

Tags:

2

Answers


  1. 0

    From my understanding the thing you want is both the left and right content div to have the same height.

    You can achieve that by setting the same height for both columns. You can do that by setting the grid-template-row: 600px (or whatever you want) and adding overflow-x:hidden and overflow-y:auto to the right div.
    I made an example here

    Also the value auto-fill on grid-template-rows is wrong, you can use the auto-fill value only on grid-template-columns.
    See more here

    Login or Signup to reply.
  2. 0

    About the Problem

    As I understand, you are facing an issue in adding margin to the top and bottom of the left container.

    Issue

    When the position is fixed, you can’t use margin. In this case, use top and bottom to ensure proper positioning.

    Solution

    .content-left {
    grid-area: 1 / 1 / 4 / 2;
    position: fixed;
    display: inline-block;
    bottom: 100px;
    top: 100px;
}

    This is the complete CSS I have provided. I hope this helps. If you have any further issues, let me know in the comments.

    Complete CSS

    :root {
    --p-color: #94A3B8;
    --h-color: #E2E8F0;
    --a-color: #94A3B8;
    --i-color: #94A3B8;
    --a-hover-color: #E2E8F0;
    --hlt-color: #E2E8F0;
    --period-color: #94A3B8;
}

html {
    scroll-behavior: smooth;
}

* {
    margin: 0;
    padding: 0;
}

body {
    height: 100vh;
    margin-top: 100px;
    background: linear-gradient(300deg,#0f4c75,#1b262c,#0f4c75);
    background-size: 180% 180%;
    animation: gradient-animation 27s ease infinite;
    background-attachment: fixed;
    font-family: "Poppins", sans-serif;
    display: flex;
    justify-content: center;
}

@keyframes gradient-animation {
    0% {
    background-position: 0% 50%;
    }
    50% {
    background-position: 100% 50%;
    }
    100% {
    background-position: 0% 50%;
    }
}

.wrapper {
    width: 60%;
    display: grid;
    gap: 10px;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(auto-fill, 100px);
}

h1 {
    font-size: 3rem;
    color: var(--h-color);
}

h2 {
    font-size: 1.3rem;
    font-weight: 500;
    color: var(--h-color);
}

h3 {
    color: var(--h-color);
}

p {
    font-size: 1rem;
    color: var(--p-color);
}

a {
    cursor: pointer;
}

.mq-headline {
    margin-bottom: 30px;
    display: none;
}

/* Left Content */

.content-left {
    grid-area: 1 / 1 / 4 / 2;
    position: fixed;
    display: inline-block;
    bottom: 100px;
    top: 100px;
}

.content-left h2 {
    margin-bottom: 15px;
}

.nav {
    list-style: none;
    margin-bottom: 15rem;
}

.nav a {
    text-decoration: none;
    color: var(--a-color);
    transition: 0.2s;
}

ul li a:hover {
    color: var(--a-hover-color);
}

.sm-links {
    list-style: none;
    display: flex;
    gap: 25px;
}

.sm-links i {
    color: var(--i-color);
    font-size: 25px;
    transition: 0.2s;
}

.sm-links i:hover {
    color: var(--a-hover-color);
}

/* Right Content */

.content-right {
    grid-area: 1 / 2 / auto / 3;
    margin: 0;
    padding: 0;
    margin-bottom: 300px;
}

/* About Styling */

#about {
    margin-bottom: 100px;
    scroll-margin-top: 100px;
}

.highlight {
    font-weight: 500;
    color: var(--hlt-color);
}

/* Experience Styling */

#experience {
    margin-bottom: 200px;
    scroll-margin-top: 100px;
}

#experience ul {
    list-style: none;
}

.exp-box {
    display: grid;
    grid-template-columns: repeat(8, minmax(0, 1fr));
    grid-template-rows: auto;
    gap: 10px;
    margin-bottom: 4rem;
}

.box-left {
    grid-column: 1 / 3;
}

.period {
    font-size: 1rem;
    font-weight: 300;
    color: var(--period-color);
}

.box-right {
    grid-column: 3 / 10;
}

h3 {
    margin-bottom: 5px;
    font-size: 1rem;
    font-weight: 500;
}

.box p {
    font-size: 0.8rem;
}

/* Projects Styling */

#projects {
    margin-bottom: 200px;
    scroll-margin-top: 100px;
}

#projects ul {
    list-style: none;
}

#projects ul li {
    margin-bottom: 4rem;
}

.project-box {
    display: grid;
    grid-template-columns: repeat(8, minmax(0, 1fr));
    gap: 10px;
    border-radius: 15px;
    transition: 0.3s;
    margin-bottom: 4rem;
}

.project-img {
    grid-column: 1 / 3;
}

.project-img img {
    grid-column: 1 / 3;
    width: 100%;
    border-radius: 15px;
    object-fit: cover;
}

.project-description {
    grid-column: 3 / 9;
}

.project-description p {
    font-size: 0.8rem;
}

/* Form Styling */

#contact {
    padding-bottom: 200px;
    scroll-margin-top: 100px;
    display: flex;
    align-items: start;
}

form { 
    max-width: 320px;
    align-self: self-start;
}

.feedback-input {
    font-family: "Poppins", sans-serif;
    font-weight: 300;
    color: var(--p-color);
    font-size: 1rem;
    border-radius: 15px;
    line-height: 22px;

    /* Opacity Background */
    background: rgba(15, 76, 117, 0.15);
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    border: 1px solid rgba(15, 76, 117, 0.3);

    transition: all 0.3s;
    padding: 13px;
    margin-bottom: 15px;
    width: 100%;
    box-sizing: border-box;
    outline: 0;
}

.feedback-input:focus { 
    border: 2px solid #fff; 
}

textarea {
    height: 150px;
    line-height: 150%;
    resize: vertical;
}

[type="submit"] {
    font-family: "Poppins", sans-serif;
    width: 100%;
    background: #0F4C75;
    border-radius: 5px;
    border: 0;
    cursor: pointer;
    color: #BBE1FA;
    font-size: 24px;
    padding-top: 10px;
    padding-bottom: 10px;
    transition: all 0.3s;
    margin-top: -4px;
    font-weight: 500;

    /* Box Shadow Effect */
    -webkit-box-shadow: 5px 5px 14px -3px rgba(0,0,0,0.25); 
    box-shadow: 5px 5px 14px -3px rgba(0,0,0,0.25);
}

[type="submit"]:hover { 
    background: #3282B8; 
}

/* Footer Styling */

#footer {
    padding-bottom: 80px;
}

footer {
    margin-bottom: 10px;
}

footer ul {
    list-style: none;
    display: flex;
    justify-content: start;
    flex-wrap: wrap;
    gap: 25px;
}

footer ul li a {
    text-decoration: none;
    color: var(--a-color);
    transition: 0.3s;
    font-size: 0.9rem;
    font-weight: 500;
}

footer ul li a:hover {
    color: var(--a-hover-color);
}

/* Media Queries */

@media (max-width: 480px) {

    body {
        margin-top: 25px;
    }

    h1 {
        font-size: 2rem;
        color: var(--h-color);
    }

    h2 {
        font-size: 1rem;
        font-weight: 500;
        color: var(--h-color);
    }

    p {
        font-size: 0.9rem;
        color: var(--p-color);
    }

    .mq-headline {
        display: block;
    }

    .wrapper {
        width: 90%;
        display: flex;
        flex-direction: column;
        gap: 10px;
        grid-template-columns: none;
        grid-template-rows: none;
    }

    .content-left {
        grid-area: none;
        position: unset;
        display: block;
        margin-bottom: 100px;
    }

    .content-left br {
        display

: none;
    }

    .nav {
        display: none;
    }

    .sm-links {
        margin-top: 25px;
    }

    .exp-box {
        display: flex;
        flex-direction: column;
        grid-template-columns: none;
        grid-template-rows: none;
        gap: 10px;
        margin-bottom: 4rem;
    }

    .period {
        font-size: 0.8rem;
        font-weight: 300;
        color: var(--period-color);
    }
    
    h3 {
        margin-bottom: 5px;
        font-size: 0.9rem;
        font-weight: 500;
    }
    
    .exp-box p {
        font-size: 0.9rem;
    }

    #contact {
        padding-bottom: 200px;
        scroll-margin-top: 100px;
        display: flex;
        flex-direction: column;
    }

    form { 
        max-width: 100%;
        align-self: self-start;
    }

    #footer {
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        padding-bottom: 25px;
    }
}

    Preview

    Top View

    https://postimg.cc/RNxRjCjX

    Bottom View

    https://postimg.cc/WFJGHx8B

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search