SitePoint Sponsor

User Tag List

Results 1 to 16 of 16
  1. #1
    SitePoint Zealot RyanKing1809's Avatar
    Join Date
    Oct 2011
    Location
    Melbourne, Australia
    Posts
    170
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Icons Overlap on Resize

    I've created a sidebar containing some icons - some top-aligned, some bottom aligned. When the browser is resized the icons overlap and I'd rather have the bottom icons not go any higher once the hit the top icons and overflow. I've tried things like "clear:both", adding margins & padding to the <ul>s' but haven't managed to come across an obvious solution. Would anyone know a way for the icons to main their fixed positioning but not overlap on resize?

    Code:
    <html>
    <head>
    	<link rel="stylesheet" type="text/css" href="_stylesheets/emstyles2.css" />
    	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    	<meta name="viewport" content="width=device-width,initial-scale=1" />
    	
    	<title>Icon Overlap Problem</title>
    
    	<style>
    	#sidebar {
    		width: 20em;
    		margin-left:-17em;
    		position:fixed;
    		top: 0;
    		bottom: 0;
    		left: 0;
    		height: 100%;
    		overflow:none;
    		z-index:2;
    		color: #ffffff;
    		background-color: #333333;
    	}
    		
    	#dummy-column {
    		width: 20em;
    		float:left;
    		margin-left:-17em;
    		height:100px;
    		position:relative;
    	}
    
    
    	#sidebar #nav ul {
    		width:3em; 
    		position: absolute; 
    		margin:0; 
    		padding 0;
    		/*clear: both;*/
    	}
    	
    	#sidebar #nav li {padding: .5625em; list-style:none;}
    	#sidebar #nav img{height: 1.875em; width: 1.875em}
    	#sidebar #nav .top{top:0; right: 0; }
    	#sidebar #nav .bottom{bottom:0; right: 0; }
    	#sidebar #nav .top li{border-bottom: 2px groove #454545}
    	#sidebar #nav .bottom li{border-top:  2px groove #454545}
    
    	#sidebar #nav {
    		width: 3em;
    		height: 100%;
    		float: right;
    		overflow: auto;
    		background-color: #2e2e2e;
    		border-left: 2px groove #454545;
    		overflow:auto;
    	}
    
    	</style>
    </head>
    <body>
    
    		<div id="sidebar">
    			<div id="nav"><ul class="top">
    				<li><img src="#"></li>
    				<li><img src="#"></li>
    				<li><img src="#"></li>
    				<li><img src="#"></li>
    			</ul>
    			<ul class="bottom">
    				<li><img src="#"></li>
    				<li><img src="#"></li>
    				<li><img src="#"></li>
    			</ul></div>
    		</div>
    	<div id="dummy-column"></div>
    
    
    </body>
    </html>

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,389
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    You'd have to add a spacer equal to the height of both those icons so that the fixed sidebar is held open. You would then need overflow:auto on the sidebar because fixed elements that stick out of the viewport are unreachable unless the fixed container itself has a scrollbar. The height:100% should also be removed from the floats.

    Something like this:

    Code:
    html,body{height:100%;margin:0}
    #sidebar {
    	width: 20em;
    	position:fixed;
    	margin-left:-17em;
    	top: 0;
    	bottom: 0;
    	left: 0;
    	z-index:2;
    	color: #ffffff;
    	background-color: #333333;
    	overflow:auto;
    }
    #dummy-column {
    	width: 20em;
    	float:left;
    	margin-left:-17em;
    	height:100px;
    	position:relative;
    }
    #sidebar #nav ul {
    	width:3em;
    	position: absolute;
    	margin:0;
     padding: 0;
    /*clear: both;*/
    	}
    #sidebar #nav li {
    	padding: .5625em;
    	list-style:none;
    }
    #sidebar #nav img {
    	height: 1.875em;
    	width: 1.875em
    }
    #sidebar #nav .top {
    	top:0;
    	right: 0;
    }
    #sidebar #nav .bottom {
    	bottom:0;
    	right: 0;
    }
    #sidebar #nav .top li { border-bottom: 2px groove #454545 }
    #sidebar #nav .bottom li { border-top:  2px groove #454545 }
    #sidebar #nav {
    	width: 3em;
    	float: right;
    	overflow: auto;
    	background-color: #2e2e2e;
    	border-left: 2px groove #454545;
    }
    #sidebar:before{
    	height:400px;
    	content:" ";
    	display:block;
    }
    For IE7 support you would need to use a sized div inside the fixed element rather than the :before rule above.

  3. #3
    SitePoint Zealot RyanKing1809's Avatar
    Join Date
    Oct 2011
    Location
    Melbourne, Australia
    Posts
    170
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    You'd have to add a spacer equal to the height of both those icons so that the fixed sidebar is held open.
    Thanks P, this creates the scroll bar as expected, however #sidebar #nav .bottom sticks to the bottom of the browser window rather than the #siderbar div and as result still overlaps the #sidebar #nav .top icons. Is it possible to get to sit on the bottom of the div instead of the window?
    Quote Originally Posted by Paul O'B View Post
    The height:100% should also be removed from the floats.
    I was using this to make #sidebar #nav to extend to full height of #sidebar so its border and colour extend all the way down. Although having it there does create some pretty funky scroll problems on overflow. Is there another way for it to extend full height without height:100%?

  4. #4
    SitePoint Zealot RyanKing1809's Avatar
    Join Date
    Oct 2011
    Location
    Melbourne, Australia
    Posts
    170
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ok I think I got it. Rather than using a spacer - set the #sidebar #nav min-height to the height of the 2 icon sets.

    Code:
    	#sidebar #nav {
    		width: 3em;
    		float: right;
    		overflow: auto;
    		background-color: #2e2e2e;
    		border-left: 2px groove #454545;
    		height: 100%;
    		min-height: 400px;
    		position:relative;
    	}

  5. #5
    SitePoint Zealot RyanKing1809's Avatar
    Join Date
    Oct 2011
    Location
    Melbourne, Australia
    Posts
    170
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ok problem no.2:

    I would like #scrolling to scroll overflow on the condition that the bottom aligned menu items collide with it. I've tried creating a spacer with #scrolling:after but with no luck - it just changes the minimum height for #sidebar. Any ideas?

    Code:
    <html>
    <head>
    	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    	<meta name="viewport" content="width=device-width,initial-scale=1" />
    
    	<title>Icon Problem</title>
    
    	<style>
    	html,body{height:100%;margin:0}
    	#sidebar {
    		width: 20em;
    		position:fixed;
    		top: 0;
    		bottom: 0;
    		left: 0;
    		z-index:2;
    		color: #ffffff;
    		background-color: #333333;	
    		overflow:auto;
    	}
    	#dummy-column {
    		width: 20em;
    		float:left;
    		margin-left:-17em;
    		height:100px;
    		position:relative;
    	}
    	#sidebar #nav ul {
    		width:3em;
    		position: absolute;
    		margin:0;
    	 	padding: 0;
    	/*clear: both;*/
    	}
    	#sidebar #nav li {
    		padding: .5625em;
    		list-style:none;
    	}
    	#sidebar #nav img {
    		height: 1.875em;
    		width: 1.875em
    	}
    	#sidebar #nav .top {
    		position:absolute;
    		top:0;
    		right: 0;
    	}
    	#sidebar #nav .bottom {
    		position:absolute;
    		bottom:0;
    		right: 0;
    	}
    	#sidebar #nav .top li { border-bottom: 2px groove #454545 }
    	#sidebar #nav .bottom li { border-top:  2px groove #454545 }
    	#sidebar #nav {
    		width: 3em;
    		float: right;
    		overflow: auto;
    		background-color: #2e2e2e;
    		border-left: 2px groove #454545;
    		height: 100%;
    		min-height: 400px;
    		position:relative;
    	}
    	#sidebar #sidecontent{font-size: .75em; margin: 0 1.35em; color: #dddddd; width:20em;}	
    	#sidebar #sidecontent ul{ width:20em;padding:0;margin:0;}
    
    	#sidecontent .menu li {
    		position:relative;
    		display:block;
    		background-color: #444;
    		padding: .72em;
    		border-radius: .8em;
    		border-bottom: 1px solid #292929;
    		border-top: 1px solid #4c4c4c;
    		text-align: center;
    		font-size: 1em;
    		letter-spacing: .1em;
    		font-weight: normal;
    		height: 1.2em;
    	}
    
    	#sidecontent .menu li:after {
    		content:"";
    		position:absolute;
    	    display:block; 
    	    width:0;
    		top:.11em; /* controls vertical position */
    		right:-.852em; /* value = - border-left-width - border-right-width */
    		border-style:solid;
    		border-width:1.2em 0 1.2em 1.2em;
    		border-color:transparent #444;
    	}
    
    	#sidecontent .menu.top li{margin: .95em 0 1.9em 0;}
    	#sidecontent .menu.bottom li{margin: 1.9em 0 .95em 0;}
    	#sidecontent .menu.bottom {
    		position:absolute;
    		bottom: 0;
    	}
    	#side-logo {
    		text-align: center;
    		padding: 1em 0 2em 0;
    		width: 100%;
    		border-bottom: 2px groove #454545;
    	}
    	#welcome {
    		text-align: center;
    		line-height: 1.5em;
    		margin: 1em 0;
    	}
    	#scrolling {
    		overflow:auto;
    		bottom: 0;
    	}
    
    	#scrolling:after{
    		height:160px;
    		content:" ";
    		display:block;
    		bottom: 0;
    		border: 1px red solid;
    	}
    
    	</style>
    </head>
    <body>
    
    		<div id="sidebar">
    				<div id="nav"><ul class="top">
    					<li><img src="_images/attributes/attribute2.svg"></li>
    					<li><img src="_images/attributes/attribute2.svg"></li>
    					<li><img src="_images/attributes/attribute2.svg"></li>
    					<li><img src="_images/attributes/attribute2.svg"></li>
    				</ul>
    				<ul class="bottom">
    					<li><img src="_images/attributes/attribute2.svg"></li>
    					<li><img src="_images/attributes/attribute2.svg"></li>
    					<li><img src="_images/attributes/attribute2.svg"></li>
    				</ul></div>
    				<div id="sidecontent"><ul class="menu top">
    					<li>SIDEBAR LINK</li>
    					<li>SIDEBAR LINK</li>
    					<li>SIDEBAR LINK</li>
    					<li>SIDEBAR LINK</li>
    					</ul>
    					<div id="scrolling">
    					<div id="side-logo"><img src="_images/g.svg"></div>
    					<p id="welcome">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris dictum tellus viverra neque bibendum in mattis ante dignissim. Nam mattis feugiat lorem porttitor adipiscing. Aliquam erat volutpat. Nunc feugiat magna vitae mauris egestas euismod. In hac habitasse platea dictumst. Praesent magna sem, malesuada non fermentum vel, luctus quis mauris. Duis quam purus, ornare vitae eleifend sed, malesuada eget libero. Phasellus sed lorem risus, nec placerat urna. In magna turpis, accumsan ac egestas quis, dictum vel massa. Nulla vitae magna arcu. Maecenas sit amet vestibulum urna. Integer feugiat dignissim leo sed ornare. Maecenas auctor ultricies dui, pulvinar tincidunt velit feugiat quis. Sed egestas ornare elit, et fringilla quam viverra ut.</p>
    					</div>
    					<ul class="menu bottom">
    						<li>SIDEBAR LINK</li>
    						<li>SIDEBAR LINK</li>
    						<li>SIDEBAR LINK</li>
    					</ul>
    					</div>
    		</div>
    	<div id="dummy-column"></div>
    
    
    </body>
    </html>

  6. #6
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,389
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    I can't really work out what you want as my first example did what I still think you are saying. Do you have a drawing or a simpler example of what's needed.

    It sounds to me as though you want some stuff at the bottom then some stuff at the top and then stuff in the middle all in a fixed positioned sidebar. You can do this quite easily with display:table (ie8+).

    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 {
    	height:100%;
    	margin:0;
    	padding:0
    }
    #sidebar {
    	position:fixed;
    	width:200px;
    	top:0;
    	bottom:0;
    	overflow:auto;
    	background:blue;
    }
    .top, .bottom, middle {
    	width:180px;
    	background:red;
    	color:#fff;
    	display:table-cell;
    	vertical-align:top;
    }
    .middle {
    	width:180px;
    	overflow:auto;
    }
    .top,.bottom{height:1px}
    .content{
    	display:table;
    	height:100%;
    	table-layout:fixed;
    	width:100%;
    }
    .tr{display:table-row}
    </style>
    </head>
    
    <body>
    <div id="sidebar">
    		<div class="content">
    				<div class="tr">
    						<div class="top">
    								<p>top stuff</p>
    								<p>top stuff</p>
    								<p>top stuff</p>
    								<p>top stuff</p>
    						</div>
    				</div>
    				<div class="tr">
    						<div class="middle">
    								<p>middle stuff</p>
    								<p>middle stuff</p>
    								<p>middle stuff</p>
    								<p>middle stuff</p>
    						</div>
    				</div>
    				<div class="tr">
    						<div class="bottom">
    								<p>top stuff</p>
    								<p>top stuff</p>
    								<p>top stuff</p>
    								<p>top stuff</p>
    						</div>
    				</div>
    		</div>
    </div>
    </body>
    </html>
    If that's not what you want you may need to simplify your demo so we can see what you are getting at.

  7. #7
    SitePoint Zealot RyanKing1809's Avatar
    Join Date
    Oct 2011
    Location
    Melbourne, Australia
    Posts
    170
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    It sounds to me as though you want some stuff at the bottom then some stuff at the top and then stuff in the middle all in a fixed positioned sidebar. You can do this quite easily with display:table (ie8+).
    Ah yes, that might be a much simpler solution. I'll have to have a play and see how it goes. Thanks P.

  8. #8
    SitePoint Zealot RyanKing1809's Avatar
    Join Date
    Oct 2011
    Location
    Melbourne, Australia
    Posts
    170
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ok here's the big picture of what I'm trying to achieve: http://img706.imageshack.us/img706/1570/sidebar01.jpg
    Hopefully that makes much more sense.

    I have played around with the code above and it's working pretty well.
    I currently have a few problems problems:

    I can't get .contents to expand to the remaining width of #sidebar.
    I can't get .contents .middle to overflow.
    I would like .contents to equal the height of .nav.

    I think it should be smooth sailing once I get those working.

    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 {
    	height:100%;
    	margin:0;
    	padding:0
    }
    #sidebar {
    	position:fixed;
    	width:20em;
    	top:0;
    	bottom:0;
    	overflow:auto;
    	background:blue;
    }
    /*------------------------NAV-----------------------*/
    .nav .top, .nav .bottom, .nav .middle {
    	width:3em;
    	background:red;
    	color:#fff;
    	display:table-cell;
    	vertical-align:top;
    }
    .nav .middle {
    	width:3em;
    	background: green;
    	vertical-align: middle;
    }
    .top,.bottom{height:1px}
    .nav{
    	display:table;
    	height:100%;
    	table-layout:fixed;
    	width:3em;
    	float:right;
    	border-left: 1em black solid;
    }
    .tr{display:table-row}
    
    /*------------------------CONTENTS-----------------------*/
    .contents .top, .contents .bottom, .contents .middle {
    	background:purple;
    	color:#fff;
    	display:table-cell;
    	vertical-align:top;
    }
    .contents .middle {
    	background: orange;
    	vertical-align: middle;
    	overflow: auto;
    	height: auto;
    }
    
    .contents {
    	display:table;
    	height:100%;
    	table-layout:fixed;
    	width: 15em; /*needs to expand to remaining width of # sidebar*/
    }
    
    </style>
    </head>
    
    <body>
    <div id="sidebar">
    		<div class="nav">
    				<div class="tr">
    						<div class="top">
    								<p>top</p>
    								<p>top</p>
    								<p>top</p>
    								<p>top</p>
    						</div>
    				</div>
    				<div class="tr">
    						<div class="middle">
    								<p>middle</p>
    								<p>middle</p>
    								<p>middle</p>
    								<p>middle</p>
    						</div>
    				</div>
    				<div class="tr">
    						<div class="bottom">
    								<p>bottom</p>
    								<p>bottom</p>
    								<p>bottom</p>
    								<p>bottom</p>
    						</div>
    				</div>
    		</div>
    		<div class="contents">
    				<div class="tr">
    						<div class="top">
    								<p>top stuff</p>
    								<p>top stuff</p>
    								<p>top stuff</p>
    								<p>top stuff</p>
    						</div>
    				</div>
    				<div class="tr">
    						<div class="middle">
    								<p>middle stuff</p>
    								<p>middle stuff</p>
    								<p>middle stuff</p>
    								<p>middle stuff</p>
    								<p>middle stuff</p>
    								<p>middle stuff</p>
    								<p>middle stuff</p>
    								<p>middle stuff</p>
    								<p>middle stuff</p>
    								<p>middle stuff</p>
    								<p>middle stuff</p>
    								<p>middle stuff</p>
    								<p>middle stuff</p>
    								<p>middle stuff</p>
    								<p>middle stuff</p>
    								<p>middle stuff</p>
    						</div>
    				</div>
    				<div class="tr">
    						<div class="bottom">
    								<p>bottom stuff</p>
    								<p>bottom stuff</p>
    								<p>bottom stuff</p>
    								<p>bottom stuff</p>
    						</div>
    				</div>
    		</div>
    </div>
    </body>
    </html>

  9. #9
    SitePoint Zealot RyanKing1809's Avatar
    Join Date
    Oct 2011
    Location
    Melbourne, Australia
    Posts
    170
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ok got it. If we go back to the code on post #5, and provided the height of the .top & .bottom elements are known, you can just set .middle's top to equal the height of the .top element bottom to equal the height of the bottom element. Then just give #sidebar a min-height. It's a little messy atm but here it is:

    Code:
    <html>
    <head>
    	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    	<meta name="viewport" content="width=device-width,initial-scale=1" />
    
    	<title>Icon Problem</title>
    
    	<style>
    	html,body{height:100%;margin:0}
    	#sidebar {
    		width: 20em;
    		position:fixed;
    		top: 0;
    		bottom: 0;
    		left: 0;
    		z-index:2;
    		color: #ffffff;
    		background-color: #333333;	
    		overflow:auto;
    		min-height: 24em;
    	}
    	#dummy-column {
    		width: 20em;
    		float:left;
    		margin-left:-17em;
    		height:100px;
    		position:relative;
    	}
    	#sidebar #nav ul {
    		width:3em;
    		position: absolute;
    		margin:0;
    	 	padding: 0;
    	}
    	#sidebar #nav li {
    		padding: .5625em;
    		list-style:none;
    	}
    	#sidebar #nav img {
    		height: 1.875em;
    		width: 1.875em
    	}
    	#sidebar #nav .top {
    		position:absolute;
    		top:0;
    		right: 0;
    	}
    	#sidebar #nav .bottom {
    		position:absolute;
    		bottom:0;
    		right: 0;
    	}
    	#sidebar #nav .top li { border-bottom: 2px groove #454545 }
    	#sidebar #nav .bottom li { border-top:  2px groove #454545 }
    	#sidebar #nav {
    		width: 3em;
    		float: right;
    		overflow: auto;
    		background-color: #2e2e2e;
    		border-left: 2px groove #454545;
    		height: 100%;
    		position:relative;
    	}
    	#sidebar #sidecontent{
    		font-size: .75em; 
    		color: #dddddd; 
    		height: 100%; 
    		width: 22.5em; /*    (17*(4/3))-((2/16) * (4/3))   - 20em - #nav - nav border & converted to local em unit*/
    		float:left; 
    		outline: 1px solid red;
    		}	
    	#sidebar #sidecontent ul{ width:20em;padding:0;margin:0;}
    	
    	#sidecontent .menu, #scrolling{width: 22.5em;}
    
    	#sidecontent .menu li {
    		position:relative;
    		display:block;
    		background-color: #444;
    		padding: .72em;
    		border-radius: .8em;
    		border-bottom: 1px solid #292929;
    		border-top: 1px solid #4c4c4c;
    		text-align: center;
    		font-size: 1em;
    		letter-spacing: .1em;
    		font-weight: normal;
    		height: 1.2em;
    	}
    
    	#sidecontent .menu li:after {
    		content:"";
    		position:absolute;
    	    display:block; 
    	    width:0;
    		top:.11em; /* controls vertical position */
    		right:-.852em; /* value = - border-left-width - border-right-width */
    		border-style:solid;
    		border-width:1.2em 0 1.2em 1.2em;
    		border-color:transparent #444;
    	}
    
    	#sidecontent .menu.top li{margin: .95em 0 1.9em 0;}
    	#sidecontent .menu.bottom li{margin: 1.9em 0 .95em 0;}
    	#sidecontent .menu.bottom {
    		position: absolute;
    		bottom: 0;
    		left: 0;
    	}
    	#sidecontent .menu.top {
    		position: absolute;
    		top: 0;
    		left: 0;
    	}
    	#side-logo {
    		text-align: center;
    		padding: 1em 0 2em 0;
    		width: 100%;
    		border-bottom: 2px groove #454545;
    	}
    	#welcome {
    		text-align: center;
    		line-height: 1.5em;
    		margin: 1em 0;
    	}
    	#scrolling {
    		position: absolute;
    		overflow:auto;
    		bottom: 12.5em;/*(3.125*4/3)*3*/
    		top: 16.67em;/*(3.125*4/3)*4*/
    		left: 0;
    	}
    
    
    	</style>
    </head>
    <body>
    
    		<div id="sidebar">
    				<div id="nav"><ul class="top">
    					<li><img src="_images/attributes/attribute2.svg"></li>
    					<li><img src="_images/attributes/attribute2.svg"></li>
    					<li><img src="_images/attributes/attribute2.svg"></li>
    					<li><img src="_images/attributes/attribute2.svg"></li>
    				</ul>
    				<ul class="bottom">
    					<li><img src="_images/attributes/attribute2.svg"></li>
    					<li><img src="_images/attributes/attribute2.svg"></li>
    					<li><img src="_images/attributes/attribute2.svg"></li>
    				</ul></div>
    				<div id="sidecontent"><ul class="menu top">
    					<li>SIDEBAR LINK</li>
    					<li>SIDEBAR LINK</li>
    					<li>SIDEBAR LINK</li>
    					<li>SIDEBAR LINK</li>
    					</ul>
    					<div id="scrolling">
    					<div id="side-logo"><img src="_images/g.svg"></div>
    					<p id="welcome">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris dictum tellus viverra neque bibendum in mattis ante dignissim. Nam mattis feugiat lorem porttitor adipiscing. Aliquam erat volutpat. Nunc feugiat magna vitae mauris egestas euismod. In hac habitasse platea dictumst. Praesent magna sem, malesuada non fermentum vel, luctus quis mauris. Duis quam purus, ornare vitae eleifend sed, malesuada eget libero. Phasellus sed lorem risus, nec placerat urna. In magna turpis, accumsan ac egestas quis, dictum vel massa. Nulla vitae magna arcu. Maecenas sit amet vestibulum urna. Integer feugiat dignissim leo sed ornare. Maecenas auctor ultricies dui, pulvinar tincidunt velit feugiat quis. Sed egestas ornare elit, et fringilla quam viverra ut.</p>
    					</div>
    					<ul class="menu bottom">
    						<li>SIDEBAR LINK</li>
    						<li>SIDEBAR LINK</li>
    						<li>SIDEBAR LINK</li>
    					</ul>
    					</div>
    		</div>
    	<div id="dummy-column"></div>
    
    
    </body>
    </html>

  10. #10
    SitePoint Zealot RyanKing1809's Avatar
    Join Date
    Oct 2011
    Location
    Melbourne, Australia
    Posts
    170
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Almost there. I just have 2 problems.

    I can't get the .middle divs to vertically align to middle. I've been trying the table-cell method but that doesn't work due to position absolute and tried the solution here with no luck.

    and I cant get the #sidebar div to overflow once the window shrinks below it's minimum height.

    Here's some much cleaner code:

    http://jsfiddle.net/q5jKM/1/

    Code:
    <html>
    <head>
    	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    	<meta name="viewport" content="width=device-width,initial-scale=1" />
    
    	<title>Icon Problem</title>
    
    	<style>
    	html,body{height:100%;margin:0}
    	#sidebar {
    		width: 20em;
    		position:fixed;
    		top: 0;
    		bottom: 0;
    		left: 0;
    		z-index:2;
    		color: #ffffff;
    		background-color: #333333;	
    		overflow:auto;
    		min-height: 34em;
    	}
    
    	#sidebar .nav {
    		width: 3em;
    		float: right;
    		overflow: auto;
    		background-color: #2e2e2e;
    		border-left: 2px groove #454545;
    		height: 100%;
    		position:relative;	
    	}
    	
    	#sidebar .content {
    		height: 100%; 
    		width: 16.875em; /*    17-(2/16)   - 20em - .nav - nav border*/
    		float:left; 
    		position:relative;
    	}
    
    	#sidebar .top {
    		position:absolute;
    		top:0;
    	}
    	#sidebar .bottom {
    		position:absolute;
    		bottom:0;
    	}
    
    	#sidebar .middle {
    		position: absolute;
    		bottom: 12em;       /*  3.125*3  */
    		top: 16em;          /*  3.125*4  */
    		background: green;
    	}
    
    	.content .middle {
    		overflow:auto;
    	}
    	
    
    	#sidebar .content > div {width: 16.875em; } /*.top .middle .bottom*/
    	#sidebar .nav > div {width:3em; } /*.top .middle .bottom*/
    	
    	
    		/*table-cell trying get vertical-align working*/
    	#sidebar .table-cell {display:table-cell;}
    	#sidebar .middle .table-cell {vertical-align: middle;}
    	
    	
    	#sidebar .content p, #sidebar .content li, #sidebar .content img {font-size: .75em; color: #dddddd;}
    
    	#sidebar ul {margin:0; padding: 0;}
    	
    	
    	
    	
    	
    /*vvvvvvvvvvvvvvvvv------NON-STRUCTURAL STUFF BELOW------vvvvvvvvvvvvvvvvv*/
    	
    	
    	
    	
    	#sidebar .nav li {
    		padding: .5625em;
    		list-style:none;
    	}
    	#sidebar .nav li img {
    		height: 1.875em;
    		width: 1.875em
    	}
    
    	#sidebar .nav .top li { border-bottom: 2px groove #454545 }
    	#sidebar .nav .bottom li { border-top:  2px groove #454545 }
    	
    	
    
    
    	.content li {
    		position:relative;
    		display:block;
    		background-color: #444;
    		padding: .72em;
    		border-radius: .8em;
    		border-bottom: 1px solid #292929;
    		border-top: 1px solid #4c4c4c;
    		text-align: center;
    		font-size: 1em;
    		letter-spacing: .1em;
    		font-weight: normal;
    		height: 1.2em;
    	}
    
    	.content li:after {
    		content:"";
    		position:absolute;
    	    display:block; 
    	    width:0;
    		top:.11em; /* controls vertical position */
    		right:-.852em; /* value = - border-left-width - border-right-width */
    		border-style:solid;
    		border-width:1.2em 0 1.2em 1.2em;
    		border-color:transparent #444;
    	}
    
    	.content .top li{margin: .95em 0 1.9em 0;}
    	.content .bottom li{margin: 1.9em 0 .95em 0;}
    
    	.content .logo {
    		text-align: center;
    		padding: 1em 0 2em 0;
    		width: 100%;
    		border-bottom: 2px groove #454545;
    	}
    	.content p.welcome {
    		text-align: center;
    		line-height: 1.5em;
    		margin: 1em 0;
    	}
    
    	</style>
    </head>
    <body>
    
    		<div id="sidebar">
    			
    			
    				<div class="nav">
    				<div class="top">
    				<ul>
    					<li><img src="_images/attributes/attribute2.svg"></li>
    					<li><img src="_images/attributes/attribute2.svg"></li>
    					<li><img src="_images/attributes/attribute2.svg"></li>
    					<li><img src="_images/attributes/attribute2.svg"></li>
    				</ul>
    				</div>
    				<div class="middle"><div class="table-cell"><p>test</p></div></div>
    				<div class="bottom">
    				<ul>
    					<li><img src="_images/attributes/attribute2.svg"></li>
    					<li><img src="_images/attributes/attribute2.svg"></li>
    					<li><img src="_images/attributes/attribute2.svg"></li>
    				</ul>
    				</div>
    				</div>
    				
    				
    				
    				<div class="content">
    					<div class="top">
    					<ul>
    						<li>SIDEBAR LINK</li>
    						<li>SIDEBAR LINK</li>
    						<li>SIDEBAR LINK</li>
    						<li>SIDEBAR LINK</li>
    					</ul>
    					</div>
    					<div class="middle"><div class="table-cell">
    					<div class="logo"><img src="_images/g.svg"></div>
    					<p class="welcome">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris dictum tellus viverra neque bibendum in mattis ante dignissim. Nam mattis feugiat lorem porttitor adipiscing. Aliquam erat volutpat. Nunc feugiat magna vitae mauris egestas euismod. In hac habitasse platea dictumst. Praesent magna sem, malesuada non fermentum vel, luctus quis mauris. Duis quam purus, ornare vitae eleifend sed, malesuada eget libero. Phasellus sed lorem risus, nec placerat urna. In magna turpis, accumsan ac egestas quis, dictum vel massa. Nulla vitae magna arcu. Maecenas sit amet vestibulum urna. Integer feugiat dignissim leo sed ornare. Maecenas auctor ultricies dui, pulvinar tincidunt velit feugiat quis. Sed egestas ornare elit, et fringilla quam viverra ut.</p>
    					</div></div>
    					<div class="bottom">
    					<ul>
    						<li>SIDEBAR LINK</li>
    						<li>SIDEBAR LINK</li>
    						<li>SIDEBAR LINK</li>
    					</ul>
    					</div>
    					</div>
    		</div>
    	<div id="dummy-column"></div>
    
    
    </body>
    </html>

  11. #11
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,389
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    That's not going to work unless you have multiple scrollbars on all elements because you can't place an absolute element inside a container and have it take up space. The absolute element is removed from the flow so the container contains nothing and therefore won't create a scrollbar when squashed (it will show a scrollbar to see an absolute element outside its area but not to provide one when the element is squashed). You would need to provide scrollbars on your top middle and bottom elements and then you could just place them at the correct position using top and bottom but that would be messy.

    I think the nearest you can get is as in the table example I gave you earlier and lose the scrollbar on the middle element.

    e.g.
    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>
    html, body {
    	height:100%;
    	margin:0;
    	padding:0;
    }
    .sidebar {
    	position:fixed;
    	top:0;
    	bottom:0;
    	left:0;
    	overflow:auto;
    	background:red;
    	width:520px;
    }
    .top, .bottom, middle {
    	width:180px;
    	background:red;
    	color:#fff;
    	display:table-cell;
    	vertical-align:top;
    }
    .top, .bottom { background:orange }
    .top, .bottom { height:170px }
    .content {
    	display:inline-table;
    	height:100%;
    	table-layout:fixed;
    	width:300px;
    	background:blue;
    	border-right:1px solid silver;
    }
    .c2 {
    	width:180px;
    	margin:0 0 0 10px;
    }
    .tr { display:table-row }
    .abs {
    	overflow:auto;
    	position:absolute;
    	min-height:100px;
    	top:170px;
    	bottom:170px;
    	width:300px;
    }
    </style>
    </head>
    
    <body>
    <div class="sidebar">
    		<div class="content">
    				<div class="tr">
    						<div class="top">
    								<p>top stuff</p>
    								<p>top stuff</p>
    								<p>top stuff</p>
    								<p>top stuff</p>
    						</div>
    				</div>
    				<div class="tr">
    						<div class="middle">
    								<p>middle stuff</p>
    								<p>middle stuff</p>
    								<p>middle stuff</p>
    								<p>middle stuff</p>
    						</div>
    				</div>
    				<div class="tr">
    						<div class="bottom">
    								<p>base stuff</p>
    								<p>base stuff</p>
    								<p>base stuff</p>
    								<p>base stuff</p>
    						</div>
    				</div>
    		</div>
    		<div class="content c2">
    				<div class="tr">
    						<div class="top">
    								<p>top stuff</p>
    								<p>top stuff</p>
    								<p>top stuff</p>
    								<p>top stuff</p>
    						</div>
    				</div>
    				<div class="tr">
    						<div class="middle">
    								<p>middle stuff</p>
    								<p>middle stuff</p>
    								<p>middle stuff</p>
    								<p>middle stuff</p>
    						</div>
    				</div>
    				<div class="tr">
    						<div class="bottom">
    								<p>base stuff</p>
    								<p>base stuff</p>
    								<p>base stuff</p>
    								<p>base stuff</p>
    						</div>
    				</div>
    		</div>
    </div>
    </body>
    </html>

  12. #12
    SitePoint Zealot RyanKing1809's Avatar
    Join Date
    Oct 2011
    Location
    Melbourne, Australia
    Posts
    170
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    ...you can't place an absolute element inside a container and have it take up space. The absolute element is removed from the flow so the container contains nothing and therefore won't create a scrollbar when squashed...
    You've given me an idea. I can just use .nav & .content to take up space since they're not absolute.

    So by having #sidebar height:100% to match the browser window & .nav, .content min-height:34em we have something that actually works. Which I'm still quite surprised about.

    Thanks Paul.

    Code:
    <html>
    <head>
    	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    	<meta name="viewport" content="width=device-width,initial-scale=1" />
    
    	<title>Icon Problem</title>
    
    	<style>
    	html,body{height:100%;margin:0}
    	#sidebar {
    		width: 22em;
    		position:fixed;
    		top: 0;
    		bottom: 0;
    		left: 0;
    		z-index:2;
    		color: #ffffff;
    		background-color: #333333;	
    		overflow:auto;
    		height: 100%;
    	}
    
    	#sidebar .nav {
    		width: 3em;
    		float: right;
    		background-color: #2e2e2e;
    		border-left: 2px groove #454545;
    		height: 100%;
    		position:relative;
    		min-height:34em;	
    	}
    	
    	#sidebar .content {
    		height: 100%; 
    		width: 16.875em; /*    17-(2/16)   - 20em - .nav - nav border*/
    		float:left; 
    		position:relative;
    		min-height:34em;
    	}
    
    	#sidebar .top {
    		position:absolute;
    		top:0;
    	}
    	#sidebar .bottom {
    		position:absolute;
    		bottom:0;
    	}
    
    	#sidebar .middle {
    		position: absolute;
    		bottom: 12em;       /*  3.125*3  */
    		top: 16em;          /*  3.125*4  */
    		background: green;
    	}
    
    	.content .middle {
    		overflow:auto;
    	}
    	
    
    	#sidebar .content > div {width: 16.875em; } /*.top .middle .bottom*/
    	#sidebar .nav > div {width:3em; } /*.top .middle .bottom*/
    	
    	
    		/*table-cell trying get vertical-align working*/
    	#sidebar .table-cell {display:table-cell;}
    	#sidebar .middle .table-cell {vertical-align: middle;}
    	
    	
    	#sidebar .content p, #sidebar .content li, #sidebar .content img {font-size: .75em; color: #dddddd;}
    
    	#sidebar ul {margin:0; padding: 0;}
    	
    	
    	
    	
    	
    /*vvvvvvvvvvvvvvvvv------NON-STRUCTURAL STUFF BELOW------vvvvvvvvvvvvvvvvv*/
    	
    	
    	
    	
    	#sidebar .nav li {
    		padding: .5625em;
    		list-style:none;
    	}
    	#sidebar .nav li img {
    		height: 1.875em;
    		width: 1.875em
    	}
    
    	#sidebar .nav .top li { border-bottom: 2px groove #454545 }
    	#sidebar .nav .bottom li { border-top:  2px groove #454545 }
    	
    	
    
    
    	.content li {
    		position:relative;
    		display:block;
    		background-color: #444;
    		padding: .72em;
    		border-radius: .8em;
    		border-bottom: 1px solid #292929;
    		border-top: 1px solid #4c4c4c;
    		text-align: center;
    		font-size: 1em;
    		letter-spacing: .1em;
    		font-weight: normal;
    		height: 1.2em;
    	}
    
    	.content li:after {
    		content:"";
    		position:absolute;
    	    display:block; 
    	    width:0;
    		top:.11em; /* controls vertical position */
    		right:-.852em; /* value = - border-left-width - border-right-width */
    		border-style:solid;
    		border-width:1.2em 0 1.2em 1.2em;
    		border-color:transparent #444;
    	}
    
    	.content .top li{margin: .95em 0 1.9em 0;}
    	.content .bottom li{margin: 1.9em 0 .95em 0;}
    
    	.content .logo {
    		text-align: center;
    		padding: 1em 0 2em 0;
    		width: 100%;
    		border-bottom: 2px groove #454545;
    	}
    	.content p.welcome {
    		text-align: center;
    		line-height: 1.5em;
    		margin: 1em 0;
    	}
    	
    
    	</style>
    </head>
    <body>
    
    		<div id="sidebar">
    			
    			
    				<div class="nav">
    				<div class="top">
    				<ul>
    					<li><img src="_images/attributes/attribute2.svg"></li>
    					<li><img src="_images/attributes/attribute2.svg"></li>
    					<li><img src="_images/attributes/attribute2.svg"></li>
    					<li><img src="_images/attributes/attribute2.svg"></li>
    				</ul>
    				</div>
    				<div class="middle"><div class="table-cell"><p>test</p></div></div>
    				<div class="bottom">
    				<ul>
    					<li><img src="_images/attributes/attribute2.svg"></li>
    					<li><img src="_images/attributes/attribute2.svg"></li>
    					<li><img src="_images/attributes/attribute2.svg"></li>
    				</ul>
    				</div>
    				</div>
    				
    				
    				
    				<div class="content">
    					<div class="top">
    					<ul>
    						<li>SIDEBAR LINK</li>
    						<li>SIDEBAR LINK</li>
    						<li>SIDEBAR LINK</li>
    						<li>SIDEBAR LINK</li>
    					</ul>
    					</div>
    					<div class="middle"><div class="table-cell">
    					<div class="logo"><img src="_images/g.svg"></div>
    					<p class="welcome">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris dictum tellus viverra neque bibendum in mattis ante dignissim. Nam mattis feugiat lorem porttitor adipiscing. Aliquam erat volutpat. Nunc feugiat magna vitae mauris egestas euismod. In hac habitasse platea dictumst. Praesent magna sem, malesuada non fermentum vel, luctus quis mauris. Duis quam purus, ornare vitae eleifend sed, malesuada eget libero. Phasellus sed lorem risus, nec placerat urna. In magna turpis, accumsan ac egestas quis, dictum vel massa. Nulla vitae magna arcu. Maecenas sit amet vestibulum urna. Integer feugiat dignissim leo sed ornare. Maecenas auctor ultricies dui, pulvinar tincidunt velit feugiat quis. Sed egestas ornare elit, et fringilla quam viverra ut.</p>
    					</div></div>
    					<div class="bottom">
    					<ul>
    						<li>SIDEBAR LINK</li>
    						<li>SIDEBAR LINK</li>
    						<li>SIDEBAR LINK</li>
    					</ul>
    					</div>
    					</div>
    		</div>
    	<div id="dummy-column"></div>
    
    
    </body>
    </html>

  13. #13
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,389
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    It only works because you've given it an arbitrary height of 34em. It's not reacting to content as such.

    The left column just overlaps though because it has no such min-height and you would also need a min-height there as well to stop the middle section disappearing.

  14. #14
    SitePoint Zealot RyanKing1809's Avatar
    Join Date
    Oct 2011
    Location
    Melbourne, Australia
    Posts
    170
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    It only works because you've given it an arbitrary height of 34em. It's not reacting to content as such.
    Yeah ok, I think you're right, that will cause a few problems. I've decided to make a few changes and try it your way.

    --

    I've decided to keep the top, middle, bottom, layout for the right column, .nav.

    And for the left column, .content, just have it as a simple list of things that scrolls down.

    --

    My only problem is that when overflow is activated for both .content & #sidebar the width of the columns become greater than the #sidebar width and the columns stack on top of each other. I would like the columns to be set widths, is there a way for #sidebar to expand to accommodate scrollbars when needed?

    I've tried removing #sidebar width and setting white-space to nowrap without any luck.


    http://jsfiddle.net/VkSWu/2/

    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 {
    	height:100%;
    	margin:0;
    	padding:0
    }
    #sidebar {
    	position:fixed;
    	top:0;
    	bottom:0;
    	background:blue;
    	overflow:auto;
    }
    .top, .bottom, .middle {
    	width:3em;
    	color:#fff;
    	display:table-cell;
    	text-align: center;
    	background:red;
    }
    
    
    .top{vertical-align:top;}
    .middle {vertical-align:middle; background:black}
    .bottom{vertical-align:bottom;}
    .top,.bottom{height:1px}
    .nav{
    	display:table;
    	height:100%;
    	table-layout:fixed;
    	width:3em;
    	outline: solid 2px black;
    	float: right;
    }
    .content {
    	height:100%;
    	width: 17em;
    	overflow: auto;
    	display: fixed;
    	float: left;
    }
    .tr{display:table-row}
    </style>
    </head>
    
    <body>
    <div id="sidebar">
    		<div class="nav">
    				<div class="tr">
    						<div class="top">
    								<p>top stuff</p>
    								<p>top stuff</p>
    								<p>top stuff</p>
    								<p>top stuff</p>
    						</div>
    				</div>
    				<div class="tr">
    						<div class="middle">
    								<p>middle stuff</p>
    						</div>
    				</div>
    				<div class="tr">
    						<div class="bottom">
    								<p>top stuff</p>
    								<p>top stuff</p>
    								<p>top stuff</p>
    								<p>top stuff</p>
    						</div>
    				</div>
    		</div>
    		<div class="content">
    			<p> contents stuff</p>
    			<p> contents stuff</p>
    			<p> contents stuff</p>
    			<p> contents stuff</p>
    			<p> contents stuff</p>
    			<p> contents stuff</p>
    			<p> contents stuff</p>
    			<p> contents stuff</p>
    			<p> contents stuff</p>
    			<p> contents stuff</p>
    			<p> contents stuff</p>
    			<p> contents stuff</p>
    			<p> contents stuff</p>
    			<p> contents stuff</p>
    			<p> contents stuff</p>
    			<p> contents stuff</p>
    			<p> contents stuff</p>
    			<p> contents stuff</p>
    			<p> contents stuff</p>
    		</div>
    </div>
    </body>
    </html>

  15. #15
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,389
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    You'd need to give a width to the sidebar to accommodate the inner elements.

    e.g.
    Code:
    #sidebar {
        width: 21.2em;
    }

  16. #16
    SitePoint Zealot RyanKing1809's Avatar
    Join Date
    Oct 2011
    Location
    Melbourne, Australia
    Posts
    170
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks.


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
  •