CODEWITHSUNDEEP
htmlcss
ICoded
ICoded

Reputation: 341

CSS div position based on parent element

I struggle with an responsive attempt. I got two columns, where the width is based on VW. The bigger column contains am div element to close. This element should have always the same top and left margin, in relatives to the parent column. No matter if I resize the window.

Currently if I resize the distance between changes, either increase or shrinks to a point, where my close div get out of position c

    body {
        background: grey;
        overflow: hidden;
    }

    .container-fluid {
        width: 100%;
        margin: auto;
        display: flex;
        flex-wrap: inherit;
        align-items: center;
        justify-content: space-between;
    }

    .col-lg-8 {
        flex: 0 0 auto;
        width: 66.666667%;
    }
        
    .col-lg-4 {
        flex: 0 0 auto;
        width: 33.333333%;
    }

    .card {
        position: relative;
        display: flex;
        flex-direction: column;
        height: 50vh;
        background-color: #fff;
        background-clip: border-box;
        border: 0 solid rgba(0, 0, 0, 0.125);
        border-radius: 1rem;
        margin: 0.5em;
        padding: 0.5em;
    }

    .title {
        margin: 0.5em;
        font-size: 3em;
        float: left;
    }

    .close-btn {
        position: absolute;
        float: left;
        cursor: pointer;
        font-size: 2em;
        left: 57vw;
        top: 2vh;
    }
<!DOCTYPE html>
<html lang="en">

<head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
    <title>Fixed Close Position</title>

    <!-- fontawesome stylesheet https://fontawesome.com/ -->
    <script src="https://kit.fontawesome.com/98a5e27706.js" crossorigin="anonymous"></script>
</head>

<body>
    <div class="container-fluid">
        <div class="col-lg-8">
            <div class="card">
                <div class="title">Headline</div>
                <div class="close-btn"><i class="fa-solid fa-circle-xmark"></i></div>                
            </div>
        </div>
        <div class="col-lg-4">
            <div class="card">
                <div class="title">News</div>
            </div>
        </div>
    </div>
</body>

</html>

ompletely. I am stuck.

Upvotes: 0

Views: 73

Answers (1)

Prince Bind
Prince Bind

Reputation: 26

Try this,

body {
        background: grey;
        overflow: hidden;
    }

    .container-fluid {
        width: 100%;
        margin: auto;
        display: flex;
        flex-wrap: inherit;
        align-items: center;
        justify-content: space-between;
    }

    .col-lg-8 {
        flex: 0 0 auto;
        width: 66.666667%;
    }

    .col-lg-4 {
        flex: 0 0 auto;
        width: 33.333333%;
    }

    .card {
        position: relative;
        display: flex;
        flex-direction: column;
        height: 50vh;
        background-color: #fff;
        background-clip: border-box;
        border: 0 solid rgba(0, 0, 0, 0.125);
        border-radius: 1rem;
        margin: 0.5em;
        padding: 0.5em;
    }

    .title {
        margin: 0.5em;
        font-size: 3em;
        float: left;
    }

    .close-btn {
        position: absolute;
        cursor: pointer;
        font-size: 2em;
        left: auto;
        top: 2vh;
        right: 2vh;
    }

Upvotes: 1

Related Questions