Issue
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:
Here is an image 2:
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
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.
Solution
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>Answered By - Moebius
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.