I'm struggling with div layout... any ideas?

Hi there, I’ve looked at more layout tutorials than I care to remember now and I still haven’t ended up with what I want!

I want 2 columns, one fixed width navigation to the left and one fluid/liquid content column to the right with scroll bars on that column but the navigation to remain static. I also want to be able to show/hide the navigation using javascript.

So far I’m stuck lol :frowning:

Any ideas?

Thanks!

Hi Guv! Welcome to SitePoint. :slight_smile:

Could you post what you have so far?

* { margin: 0px; padding: 0px; }

html, body { 
	margin: 0;
	padding: 0;
	border: 0;
	min-height: 100%;
	min-width: 100%;
	max-height: 100%;
	max-width: 100%;
	overflow: hidden;
}

body {
	background: url(../images/background.png) top left; 	
	color: #555;
	font-family: verdana, arial, sans-serif;
	font-size: 12px;
}
#content_container {
	position: fixed;
	top: 0px;
	left: 212px;
	max-height: 100%;
	min-height: 100%;
	max-width: 80%;
	min-width: 80%;
	height: 100%;
	width: 80%;
	margin-right: 212px;
	overflow: auto;
}

#navigation {
	float: left;
	width: 192px;
	padding: 10px;
	display: block;
	clear: left;
}

#content {
	float: left;
	padding: 10px 10px 10px 14px;
	display: block;
	max-width: 100%;
}

<body>
<div id="navigation">
 Navigation generated by PHP
</div>
<div id="content_container">
<div id="content">
 Content generated by PHP
</div>
</div>
</body>

It’s a mess, but at the moment that gives me roughly what I’m looking for but I have a problem with the scroll bars being out of the browser windows view hence the 80% rather than the 100% I want to achieve.

I thought it would work using 100% then a margin-right of the navigation width but this didn’t work :S

Any help is greatly appreciated!

Is this something more like what you want?


<!DOCTYPE html>
<html lang="en">

<head>

<meta charset="utf-8">

<title>Experiment</title>
	
<style type="text/css" media="all">
* { margin: 0px; padding: 0px; }

html, body { 
	margin: 0;
	padding: 0;
	border: 0;
	min-height: 100%;
	min-width: 100%;
	max-height: 100%;
	max-width: 100%;
	overflow: hidden;
}

body {
	background: url(../images/background.png) top left; 	
	color: #555;
	font-family: verdana, arial, sans-serif;
	font-size: 12px;
}
#content_container {
	margin-left: 212px;
	overflow: auto;
}

#navigation {
	width: 192px;
	padding: 10px;
	top:0;
	left:0;
	position: fixed;
}

#content {
	padding: 10px 10px 10px 14px;
}
</style>
	
</head>




<body>
<div id="navigation">
 Navigation generated by PHP
</div>
<div id="content_container">
<div id="content">
 Content generated by PHP
</div>
</div>
</body>

</html>


I’m not into all the 100% height stuff, so I’ll leave that to you, but I’ve just put the margin on the left side of the content container and removed its set width.

The sidebar is fixed. Just be aware this has problems in older browsers like IE6 (though personally, I’m over that browser entirely).

That leaves me unable to scroll the content (no scroll bars). If I set the overflow to auto for html, body then I can scroll vertically but not horizontally.

If you want to scroll vertically, just leave out all the 100% height stuff and overflows. Scrolling when the content is longer than the viewport is natural.

Hi, It’s simpler than that if I understand correctly :slight_smile:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style type="text/css">
html, body {
    height:100%;
    margin:0;
    padding:0;
}
body{background:green;}
p {
    margin:0 0 1em;
    padding:10px;
}
p,last{margin-bottom:0;}
#nav {
    width:200px;
    position:absolute;
    position:fixed;
    left:0;
    top:0;
    bottom:0;
    overflow:auto;
    background:blue;
}
#content {
    min-height:100%;
    background:green;
    margin-left:201px;
    border-left:1px solid #fff;
}
* html #content {
    height:100%;
}
</style>
</head>
<body>
<div id="nav">
    <ul>
        <li>nav</li>
        <li>nav</li>
        <li>nav</li>
        <li>nav</li>
        <li>nav</li>
    </ul>
</div>
<div id="content">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis pellentesque mauris pellentesque justo congue in faucibus justo faucibus. Nunc odio sapien, vehicula eget interdum quis, euismod dignissim magna. Morbi condimentum massa sit amet nisl fringilla quis laoreet sapien porttitor. Aenean adipiscing rutrum accumsan. Cras ipsum ligula, pretium sit amet fermentum et, viverra quis quam. Suspendisse sed lacus augue, a sagittis metus. Nunc pulvinar, purus a semper consequat, enim orci viverra dui, at iaculis quam odio sit amet eros. Aliquam eleifend ipsum et libero sollicitudin dictum eu et ipsum. Phasellus venenatis semper felis, vitae pretium enim fermentum lacinia. Nulla a erat tortor, et fermentum nisi. Suspendisse potenti. Ut pellentesque lorem ut metus convallis viverra. Nam sagittis, mauris sit amet tempor viverra, orci odio condimentum mi, eu semper metus odio vel augue. Nunc diam quam, cursus quis mollis a, rutrum euismod nisl. </p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis pellentesque mauris pellentesque justo congue in faucibus justo faucibus. Nunc odio sapien, vehicula eget interdum quis, euismod dignissim magna. Morbi condimentum massa sit amet nisl fringilla quis laoreet sapien porttitor. Aenean adipiscing rutrum accumsan. Cras ipsum ligula, pretium sit amet fermentum et, viverra quis quam. Suspendisse sed lacus augue, a sagittis metus. Nunc pulvinar, purus a semper consequat, enim orci viverra dui, at iaculis quam odio sit amet eros. Aliquam eleifend ipsum et libero sollicitudin dictum eu et ipsum. Phasellus venenatis semper felis, vitae pretium enim fermentum lacinia. Nulla a erat tortor, et fermentum nisi. Suspendisse potenti. Ut pellentesque lorem ut metus convallis viverra. Nam sagittis, mauris sit amet tempor viverra, orci odio condimentum mi, eu semper metus odio vel augue. Nunc diam quam, cursus quis mollis a, rutrum euismod nisl. </p>
    <p class="last">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis pellentesque mauris pellentesque justo congue in faucibus justo faucibus. Nunc odio sapien, vehicula eget interdum quis, euismod dignissim magna. Morbi condimentum massa sit amet nisl fringilla quis laoreet sapien porttitor. Aenean adipiscing rutrum accumsan. Cras ipsum ligula, pretium sit amet fermentum et, viverra quis quam. Suspendisse sed lacus augue, a sagittis metus. Nunc pulvinar, purus a semper consequat, enim orci viverra dui, at iaculis quam odio sit amet eros. Aliquam eleifend ipsum et libero sollicitudin dictum eu et ipsum. Phasellus venenatis semper felis, vitae pretium enim fermentum lacinia. Nulla a erat tortor, et fermentum nisi. Suspendisse potenti. Ut pellentesque lorem ut metus convallis viverra. Nam sagittis, mauris sit amet tempor viverra, orci odio condimentum mi, eu semper metus odio vel augue. Nunc diam quam, cursus quis mollis a, rutrum euismod nisl. </p>
</div>
</body>
</html>


(Not IE6)