How to make this responsive layout-CodePudding

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?

enter image description here enter image description here Here is my 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 ><div >
<div ><div >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>

CodePudding user response：

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 >
        <div >
            Welcome ...
        </div>
        <div >
            Login ...
        </div>
    </div>
</body>
</html>