Hello, I’ve been working on this for the past days and have nearly ripped my hair out trying to figure it.
I have this Fixed-Fluid layout that I want to make responsive. I have the left column (fixed) responsive to what I want done, but when the main content (fluid) is suppose to fall beneath the left column section,there is no scroll for the content? Any help would be appreciated
Here’s the CSS:
body {
margin: 0;
padding: 0;
border: 0;
overflow: hidden;
height: 100%;
max-height: 100%;
font-family: 'Open Sans';
font-size: .9em;
}
nav {
margin: 0;
padding: 10px 0;
list-style: none;
text-align: center;
background-color: #DBDBDB;
font-size: .8em;
}
nav ul {
margin: 0;
padding: 0;
}
nav ul li {
display: block;
list-style-type: none;
margin: 0;
padding-top: 2em;
padding-bottom: 2em;
}
nav ul li a {
width: auto;
margin: 0 25px;
text-align: center;
padding: 0;
font-size: 1.2em;
text-transform: uppercase;
text-decoration: none;
color: #000;
}
nav ul li a:hover {
color: #0C2B54;
}
nav ul li a:visited {
color: #000;
}
@media screen and (max-width: 560px) {
nav ul li {
display: inline;
float: left;
list-style-type: none;
margin: 0;
padding 2em;
}
}
#leftcontent {
position: absolute;
top: 0;
bottom: 0;
left: 0;
width: 300px;
height: 100%;
overflow: hidden;
background: #DBDBDB;
}
#leftcontent h1 {
text-transform: uppercase;
text-align: center;
}
@media screen and (max-width: 560px) {
#leftcontent {
position: static;
float: left;
width: 100%;
height: 10em;
border-bottom: 1em solid #0C2B54;
}
}
#maincontent {
position: absolute;
top: 0;
left: 300px;
right: 0;
bottom: 0;
overflow: auto;
background: #fff;
border-left: 1em solid #0C2B54;
}
@media screen and (max-width: 560px) {
#maincontent {
position: static;
overflow: auto;
width: 100%;
border-left: none;
}
}
And here’s the HTML:
<!DOCTYPE html>
<html lang="en">
<body>
<div id="leftcontent">
<div class="innertube">
<h1>dkhgkfdbvkd</h1>
<nav>
<ul>
<li><a href="/">_________</a></li>
<li><a href="/">_________</a></li>
<li><a href="/">_________</a></li>
<li><a href="/">_________</a></li>
</ul>
</nav>
</div>
</div>
<div id="maincontent">
<div class="innertube">
<article class="blog">
<header><h1>Some kind of title</h1></header>
<p>Fill this area up with enough content to make the scroll option available</p>
<footer>Blsvnkdfjbndfkbn</footer>
</article>
</div>
</div>
</body>
</html>