I am new to web design and I am trying to create a webpage similar to the one shown in this image. However, I want to set the height and width of the divs using percentage values instead of pixels.
Whenever I attempt this, the boxes end up overlapping or not appearing at all. I believe my logic is as follows:
For instance:
- The wrapper has attributes
position:absolute;,height:100%;,width:100%;(When defined in pixels there is no issue, but when percentages are used, most times the wrapper does not render properly). - The header has attributes
position:relative(relative to the wrapper?)height:10%;andwidth:100%; - The slider has attributes
position:relative;,height:70%;,width;100%;,top:10%(since 10% is allocated to the header, it should start below that??) ...etc ... - The footer has attributes
position: relative;,height:10%;,width:100%;,bottom:0;(To fit it to the bottom)
In summary, can someone assist me with absolute and relative positioning based on my example?
#wrapper{
background-color:red;
height:100%;
width:100%;
position: absolute;
}
#header{
background-color:yellow;
height:20%;
width:100%;
position: relative;
}
#slider{
background-color:blue;
position: relative;
height:70%;
width:100%;
top:20%;
}
#footer{
background-color:yellow;
position:relative;
height:10%;
width:100%;
top:90%;
}<html>
<head>
<title></title>
</head>
<body>
<div id="wrapper">
<div id="header"></div>
<div id="slider"></div>
<div id="footer"></div>
</div>
</body>
</html>