'How to make this responsive layout

I can't get the right part to assume the center of the page while being constrained by the content of the left part.

Does anyone have time to look into my problem?

Here is an images 1: enter image description here

Here is an image 2: enter image description here

And here is my own attempt:

<html>
<head>
    <style type="text/css">
        html, body, body>table, body>table>tbody {
            width: 100%;
            height:100%;
        }
        html, body, body>table, body>table>tbody, body>table>tbody>tr , body>table>tbody>td, p {
            margin:0;
            padding:0;
        }
        td.layout {
            width:80%;
            min-width:500px;
            background-color:#E0E0E0;
        }
        .center {
            width:100%;
            max-width:1024px;
            margin:0px auto;
            background-color:green;
            border:dashed 2px blue;
        }
    </style>
    <style>
        .wrapper-primary {
            margin:0 auto;
            width:100%;
            min-width:320px;
            max-width:480px;
            background-color:red;
            border:solid 2px black;
        }
        .primary {
            position:absolute;
            background-color:white;
        }
    </style>

</head>

<body>
<table cellpadding="0" cellspacing="0">
<tbody>
    <tr><td></td><td>-</td><td></td></tr>
    <tr><td></td><td class="layout"><div class="center">
<div class="wrapper-primary"><div class="primary">Here is my issue</div></div>
        <p>Center</p>
        <p>Center</p>
    </div></td><td></td></tr>
    <tr><td></td><td>+</td><td></td></tr>
</tbody>
</table>
</body>
</html>

Post-Edit 15/05/2022 : My second own attempt. @Sameer I will be more specific by taking the example of @Moebius

The Style layout:

/* Behavior */
.content {
    width: 50%;
    min-width: 240px;
    max-width: 740px;
    height: 40vh;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
}

.right-side {
    position: absolute;
    width: max(49%, 200px);

    right: 0px;
    top: -66px;
    bottom: -66px;
}
.login {
    width:calc(100% - 33px);
}
.welcome {
    width:calc(100% - max(49%, 200px) );

}

The Html code:

<html>
<head>
<style>
/* Debug : Frame border*/
.content, .right-side {
  border: dashed 1px red;
}
.welcome, .login {
  border:solid 1px blue;
  height:100%;
}
</style>
</head>
<body>
    <div class="content">
        <div class="welcome">
            <p>W...</p><!--p>Future issue</p><p>+</p><p>+</p><p>+</p><p>+</p><p>+</p-->
        </div>
        <div class="right-side">
            <div class="login">
                Login:
            </div>
        </div>
    </div>
</body>
</html>

The responsiveness takes effect between each value of the window.width : 1500px, 800px, 460px, 215px enter image description here

In my second own attempt, the behavior obtained in width is the one I wanted. The problem happens when I resize vertically. If I reduce the window vertically too much, the top of my welcome title is cropped/hidden.

How should I correct the scrolling of my window so that it respects my design ?

I tried to answer it myself using a table in my first example, but Moebius's solution looks really elegant.

My last problem is how do I make my design vertically fit my content? Assuming that it is the content part that imposes the vertical size.

Thank you for your interest in my post.

htmlcss


Solution 1:[1]

This should be starting point for your case:

        body {
            background-color: #eee;
        }

        .content {
            width: 50%;
            height: 40vh;
            background-color: white;
            position: absolute;
            left: 0;
            right: 0;
            top: 0;
            bottom: 0;
            margin: auto;
            border: solid 1px red;

        }

        .right-side {
            position: absolute;
            min-height: 100%;
            width: 30%;
            right: 60px;
            top: -30px;
            bottom: -30px;
            background-color: white;
            border: solid 1px green;
            padding: 20px;
        }

        .welcome {
            padding: 20px;
        }
<html>
<head>
</head>
<body>
    <div class="content">
        <div class="welcome">
            Welcome ...
        </div>
        <div class="right-side">
            Login ...
        </div>
    </div>
</body>
</html>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Moebius

Related Questions