I am having an issue with setting up the layout of my webpage. I want the body to take up 100% of the screen size, and within the body there is a mainContainer div that should be 90% of the body's dimensions.
The problem arises when I try to add a div (LoginInnerContainer) inside the mainContainer and set it to be 30% of the root div while also centering it. For some reason, the body becomes longer than necessary and the inner container does not align in the middle as expected.
How can I resolve this issue while ensuring the body retains its original screen size? Unfortunately, I am unable to upload a picture to provide visual clarity on the matter.
Here is my HTML code:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" href="<?php URL?> public/css/default.css">
<title></title>
</head>
<body>
<div id="mainContainer">
<header>
</header>
<div id="loginInnerContainer">
<div id="loginLogoContainer"></div>
<div id="loginFormContainer"></div>
</div>
</body>
</html>
Here is my current CSS code where the #loginInnerContainer is not properly centered resulting in unnecessary lengthening of the page:
#mainContainer {
/* height: 590px;*/
height: 90%;
width: 90%;
background-color: white;
margin: 50px;
}
html, body{
height: 100%;
}
html {
background-image:url('../images/wood-dark.png');
height: 100%;
}
body {
width: 100%;
min-height:100%;
display: block;
}
#loginMainContainer{
height: 100%;
padding:auto 0;
}
#loginInnerContainer{
background-color:blue;
width: 100%;
height: 30%;
margin:auto 0 auto 0;
}