Div design with fixed side menu

HTML & CSS
1

Hi,

how do I create at webdesign like this: http://conversations.nokia.com/2011/09/08/microsoft-apps-are-coming-to-symbian/

I have played around with div and css, but without any results because there are some problems with chrome and safari compiling of the code.

2

Hi Welcome to Sitepoint :slight_smile:

You don;t really need to do anything special to make a fixed column like that as you just use position:fixed. When you want a fixed column to remain constant with the layout then don;t use co-ordinates and let it takes up its auto position. This is most easily done by creating a normal 3 column layout with floats and then inside the float concerned you just ad an element that is position:fixed with a width to match the float but no co-ordinates. It will then occupy the same space as that column and keep track with a centred layout.

Here’s the basic example:


<!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 {
	margin:0;
	padding:0
}
body {
	background:#ccc;
	color:#000
}
p {
	padding:0 10px;
	margin:0 0 1em;
}
#outer {
	width:960px;
	margin:auto;
}
#outer:after {
	content:".";
	display:block;
	clear:both;
	visibility:hidden;
	height:0;
}
.sidebar {
	float:left;
	width:200px;
	background:#fff;
}
.main {
	width:500px;
	background:#fff;
	margin:0 0 0 30px;
	float:left;
}
.sidebar2 {
	float:right;
	width:200px;
}
#fixed {
	position:fixed;
	width:200px;
	background:#fff;
}
</style>
</head>

<body>
<div id="outer">
		<div class="sidebar">
				<p>Normal column 1</p>
				<p>Normal column 1</p>
				<p>Normal column 1</p>
				<p>Normal column 1</p>
				<p>Normal column 1</p>
				<p>Normal column 1</p>
				<p>Normal column 1</p>
				<p>Normal column 1</p>
				<p>Normal column 1</p>
		</div>
		<div class="main">
				<p>Main normal centre column Main normal centre column Main normal centre column Main normal centre column Main normal centre column Main normal centre column Main normal centre column Main normal centre column Main normal centre column Main normal centre column Main normal centre column Main normal centre column Main normal centre column Main normal centre column Main normal centre column Main normal centre column Main normal centre column Main normal centre column Main normal centre column Main normal centre column </p>
				<p>Main normal centre column Main normal centre column Main normal centre column Main normal centre column Main normal centre column Main normal centre column Main normal centre column Main normal centre column Main normal centre column Main normal centre column Main normal centre column Main normal centre column Main normal centre column Main normal centre column Main normal centre column Main normal centre column Main normal centre column Main normal centre column Main normal centre column Main normal centre column </p>
				<p>Main normal centre column Main normal centre column Main normal centre column Main normal centre column Main normal centre column Main normal centre column Main normal centre column Main normal centre column Main normal centre column Main normal centre column Main normal centre column Main normal centre column Main normal centre column Main normal centre column Main normal centre column Main normal centre column Main normal centre column Main normal centre column Main normal centre column Main normal centre column </p>
				<p>Main normal centre column Main normal centre column Main normal centre column Main normal centre column Main normal centre column Main normal centre column Main normal centre column Main normal centre column Main normal centre column Main normal centre column Main normal centre column Main normal centre column Main normal centre column Main normal centre column Main normal centre column Main normal centre column Main normal centre column Main normal centre column Main normal centre column Main normal centre column </p>
				<p>Main normal centre column Main normal centre column Main normal centre column Main normal centre column Main normal centre column Main normal centre column Main normal centre column Main normal centre column Main normal centre column Main normal centre column Main normal centre column Main normal centre column Main normal centre column Main normal centre column Main normal centre column Main normal centre column Main normal centre column Main normal centre column Main normal centre column Main normal centre column </p>
				<p>Main normal centre column Main normal centre column Main normal centre column Main normal centre column Main normal centre column Main normal centre column Main normal centre column Main normal centre column Main normal centre column Main normal centre column Main normal centre column Main normal centre column Main normal centre column Main normal centre column Main normal centre column Main normal centre column Main normal centre column Main normal centre column Main normal centre column Main normal centre column </p>
		</div>
		<div class="sidebar2">
				<div id="fixed">
						<p>Fixed column here</p>
						<p>Note that any content that goes below the fold will be unreachable so don't use this for long columns or make sure that you implement scrollbars on this element.</p>
				</div>
		</div>
</div>
</body>
</html>

Note that if content goes below the fold in the fixed column then it will be unreachable so care must be taken. In the example you linked to window heights of less than 700px lose the bottom of that fixed column and content become unreachable and unusable.

Fixed elements are best for small elements that sit either at the top or the bottom of the screen.

Also note that fixed element are removed from the flow so you could not have a footer under the three columns unless you always make the other columns taller than the fixed column.

3

Super answer. I see the problem with screen resolutions under 700px, I will found another design solution. Thanks again.:confused: