What is the best way to position the footer at the bottom of the page without overlapping the top content?
Is there a method to center both the height and width of the header element on the page?
Can you review the layout of this webpage and provide feedback on its structure?
html { width:100%; height:100%; margin:0; padding:0; }
body { width:100%; height:100%; margin:0; padding:0; }
body {
font-family: Garamond;
}
header {
background-color: #3CB371;
width: auto;
height: 150px;
color: white;
font-size: 130%;
text-align: center;
padding: 10px;
}
section {
position: absolute;
left: 50%;
transform: translate(-50%, -50%);
width: 100%;
}
.left {
background-color: #FAEBD7;
position: absolute;
left: 0px;
width: 55%;
height: 450px;
}
.right {
background-color: #FAEBD7;
position: absolute;
right: 0px;
width: 45%;
height: 450px;
}
img {
padding: 3px;
margin: 15px;
border: dotted;
border-radius: 2px;
border-color: #3CB371;
}
footer {
background-color: red;
position: absolute;
}<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Title</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<h2>Some H2<h2>
</header>
<section>
<article>
<div class="right">
<h3>Some H3</h3>
<ol>
<li value="5">Some5 LI</li>
<li value="9">Some9 LI</li>
<li value="20">Some20 LI</li>
<ol>
<a href="url1" target="_blank" rel="noopener">
<li>Some href1 text</li>
<a href="url" target="_blank" rel="noopener">
<li>Some href2 text</li>
</ol>
</ol>
</div>
<div class="left">
<img src="imgurl" alt="Image" class="center">
</div>
</article>
</section>
<footer>
Some footer text
</footer>
</body>
</html>Thank you for your assistance!