I am looking to create a basic HTML layout with CSS that includes a header and two columns. The right column should have a fixed width of 100px, while the left column may have varying content lengths. I want both columns to stretch to the footer. Below is the HTML code I am using:
<!DOCTYPE html>
<html>
<head>
<title>Coming soon...</title>
</head>
<body>
<div class="wrapper">
<div class="header">
Header
</div>
<div class="content">
This is where the dynamic content will go... it may be short or long. I want it to always reach the footer!
</div>
<div class="right-menu">
This will be a menu... it should match the height of the content DIV.
</div>
<div class="footer">
Footer
</div>
</div>
</body>
</html>
Below is the CSS code I am using:
.header {
background-color: Coral ;
width: 100%;
}
.content {
background-color: BlanchedAlmond ;
float:left;
width:100%;
margin-right: -100px;
}
.right-menu {
background-color: BurlyWood ;
float: right;
width: 100px;
}
.footer {
background-color: Coral;
width: 100%;
clear: both;
position: absolute;
bottom: 0;
}
While creating a JSFiddle of this layout, I noticed that the content div extends under the menu. How can I prevent this? You can view the JSFiddle here: https://jsfiddle.net/dwn82s81/
Thank you in advance for any assistance. It has been a while since I worked with CSS!