SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Member
    Join Date
    Feb 2012
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Div design with fixed side menu

    Hi,

    how do I create at webdesign like this: http://conversations.nokia.com/2011/...ng-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. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,526
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Hi Welcome to Sitepoint

    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:
    Code:
    <!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. #3
    SitePoint Member
    Join Date
    Feb 2012
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    Hi Welcome to Sitepoint

    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:
    Code:
    <!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.
    Super answer. I see the problem with screen resolutions under 700px, I will found another design solution. Thanks again.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •