After putting in some hard work to create a 'holy grail'-style layout for my website, I'm faced with two issues that need fixing.
The main objective is to have a 'sticky' footer that expands along with the height of the browser window, along with a header and 3 columns. The setup includes fixed columns on both the left and right sides, while the middle column should adapt fluidly.
The problems arise from the behavior of the center 'fluid' column which isn't meeting my expectations. My intention is for the fixed columns to always remain fully visible, with the center column filling the remaining horizontal space. However, the center column occupies more room than anticipated, forcing users to scroll to view the right-hand column (as seen in the provided image below). Furthermore, the 'text-align: center' property doesn't seem to be aligning the text within the visible area of the center column as desired. Any assistance would be greatly appreciated!
Image Reference: https://i.sstatic.net/XKU0g.png
HTML Code:
<html>
<head>
<link type="text/css" rel="stylesheet" href="test.css" />
</head>
<body>
<div id="header">
<p>Header</p>
</div>
<div id="container">
<div id="center">
<p>Content</p>
</div>
<div id="left">
<p>Content</p>
</div>
<div id="right">
<p>Content</p>
</div>
</div>
<div id="footer">
<p>Footer</p>
</div>
</body>
</html>
CSS Styles:
* {
margin: 0;
}
#container {
width:100%;
}
#header {
text-align: center;
background: #5D7B93;
height: 95px;
padding: 5px;
position: fixed;
top: 0;
width: 100%;
z-index: 15;
}
#center{
text-align: center;
margin-top: 105px;
background: red;
position: relative;
float: left;
width: 100%;
height: 100%;
}
#left {
height: 100%;
width: 150px;
text-align:center;
background:#EAEAEA;
margin-top: 105px;
margin-left: -100%;
overflow: scroll;
position: relative;
float: left;
}
#right {
position: relative;
height: 100%;
width: 150px;
margin-right: -100%;
margin-top: 105px;
background: blue;
text-align: center;
float: left;
}
#footer {
text-align:center;
background: #5D7B93;
height:25px;
padding:5px;
position: fixed;
bottom: 0;
width: 100%;
}