Trouble with responsive layout?

HTML & CSS
1

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 :slight_smile:

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>
2

Hi,

The content is stuck to the side of that floated div so you need to clear it.


 @media screen and (max-width: 560px) {
#maincontent {
	position: static;
	overflow: auto;
	width: 100%;
	border-left: none;
	[B]clear:both;[/B]
}
}

Of course because you have hidden the overflow on the body the element will never be visible outside the viewport unless you also release the overflow:hidden from the body.

Be very careful with hiding overflow because as soon as content extends further than the space you have allocated it will be hidden and unreachable.

It looks as though you are trying to create two fixed columns at desktop size but you will need to provide scrollbars on each column or content will be unreachable if it needs to scroll or doesn’t fit in the viewport.