Advanced Search

Return to Snippet

Revision: 42556
at March 7, 2011 08:48 by gdesjardins
Initial Code 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >
<head>

<title>Conflicting Absolute Positions - Demonstration layout 1</title>

<style type="text/css">

html {
	overflow: hidden;
}

body {
	overflow: hidden;
	padding: 0;
	margin: 0;
	width: 100%;
	height: 100%;
}

#top {
	padding: 0;
	margin: 0;
	position: absolute;
	top: 0px;	
	left: 0px;
	width: 100%;
	height: 80px;
	overflow: hidden;
}

#main {
	padding: 0;
	margin: 0;
	position: absolute;	
	top: 100px;
	left: 240px;
	right: 20px;
	bottom: 20px;
	overflow: auto;
}

#side {	
	padding: 0;
	margin: 0;
	position: absolute;	
	top: 100px;
	left: 20px;
	bottom: 20px;
	width: 200px;
	overflow: auto;	
}

</style>

<!--[if lt IE 7]>
<style type="text/css">

#main {
	height:expression(document.body.clientHeight-120); /* 80+20+20=120 */
	width:expression(document.body.clientWidth-260); /* 200+20+20+20=260 */
}

#side {
	height:expression(document.body.clientHeight-120); /* 80+20+20=120 */
}

</style>
<![endif]-->

</head>

<body>

<div id="top">
	<div class="content">
		<h2>Header</h2>
	</div>
</div>

<div id="side">
	<div class="content">
		<h2>Sidebar</h2>
		<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi eget elit. Donec pulvinar. Fusce non est ac libero blandit laoreet. Pellentesque iaculis erat. Cras ullamcorper. Vivamus et nibh. Quisque vel leo vitae felis hendrerit fermentum. Donec consectetuer, nunc id mattis elementum, lacus ligula fringilla leo, quis varius lacus turpis sit amet massa. Morbi accumsan ante suscipit ipsum. Curabitur non tellus nec metus venenatis iaculis. Donec tempor nunc. Mauris sit amet erat. Vestibulum sed nulla ac nisl dapibus porta. Praesent a nisi quis nisl cursus tempor. Praesent semper laoreet nisl. Donec id urna.</p>
		<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi eget elit. Donec pulvinar. Fusce non est ac libero blandit laoreet. Pellentesque iaculis erat. Cras ullamcorper. Vivamus et nibh. Quisque vel leo vitae felis hendrerit fermentum. Donec consectetuer, nunc id mattis elementum, lacus ligula fringilla leo, quis varius lacus turpis sit amet massa. Morbi accumsan ante suscipit ipsum. Curabitur non tellus nec metus venenatis iaculis. Donec tempor nunc. Mauris sit amet erat. Vestibulum sed nulla ac nisl dapibus porta. Praesent a nisi quis nisl cursus tempor. Praesent semper laoreet nisl. Donec id urna.</p>
	</div>
</div>

<div id="main">
	<div class="content">
		<h2>Main content</h2>
		<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi eget elit. Donec pulvinar. Fusce non est ac libero blandit laoreet. Pellentesque iaculis erat. Cras ullamcorper. Vivamus et nibh. Quisque vel leo vitae felis hendrerit fermentum. Donec consectetuer, nunc id mattis elementum, lacus ligula fringilla leo, quis varius lacus turpis sit amet massa. Morbi accumsan ante suscipit ipsum. Curabitur non tellus nec metus venenatis iaculis. Donec tempor nunc. Mauris sit amet erat. Vestibulum sed nulla ac nisl dapibus porta. Praesent a nisi quis nisl cursus tempor. Praesent semper laoreet nisl. Donec id urna.</p>
		<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi eget elit. Donec pulvinar. Fusce non est ac libero blandit laoreet. Pellentesque iaculis erat. Cras ullamcorper. Vivamus et nibh. Quisque vel leo vitae felis hendrerit fermentum. Donec consectetuer, nunc id mattis elementum, lacus ligula fringilla leo, quis varius lacus turpis sit amet massa. Morbi accumsan ante suscipit ipsum. Curabitur non tellus nec metus venenatis iaculis. Donec tempor nunc. Mauris sit amet erat. Vestibulum sed nulla ac nisl dapibus porta. Praesent a nisi quis nisl cursus tempor. Praesent semper laoreet nisl. Donec id urna.</p>
		<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi eget elit. Donec pulvinar. Fusce non est ac libero blandit laoreet. Pellentesque iaculis erat. Cras ullamcorper. Vivamus et nibh. Quisque vel leo vitae felis hendrerit fermentum. Donec consectetuer, nunc id mattis elementum, lacus ligula fringilla leo, quis varius lacus turpis sit amet massa. Morbi accumsan ante suscipit ipsum. Curabitur non tellus nec metus venenatis iaculis. Donec tempor nunc. Mauris sit amet erat. Vestibulum sed nulla ac nisl dapibus porta. Praesent a nisi quis nisl cursus tempor. Praesent semper laoreet nisl. Donec id urna.</p>
		<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi eget elit. Donec pulvinar. Fusce non est ac libero blandit laoreet. Pellentesque iaculis erat. Cras ullamcorper. Vivamus et nibh. Quisque vel leo vitae felis hendrerit fermentum. Donec consectetuer, nunc id mattis elementum, lacus ligula fringilla leo, quis varius lacus turpis sit amet massa. Morbi accumsan ante suscipit ipsum. Curabitur non tellus nec metus venenatis iaculis. Donec tempor nunc. Mauris sit amet erat. Vestibulum sed nulla ac nisl dapibus porta. Praesent a nisi quis nisl cursus tempor. Praesent semper laoreet nisl. Donec id urna.</p>
		<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi eget elit. Donec pulvinar. Fusce non est ac libero blandit laoreet. Pellentesque iaculis erat. Cras ullamcorper. Vivamus et nibh. Quisque vel leo vitae felis hendrerit fermentum. Donec consectetuer, nunc id mattis elementum, lacus ligula fringilla leo, quis varius lacus turpis sit amet massa. Morbi accumsan ante suscipit ipsum. Curabitur non tellus nec metus venenatis iaculis. Donec tempor nunc. Mauris sit amet erat. Vestibulum sed nulla ac nisl dapibus porta. Praesent a nisi quis nisl cursus tempor. Praesent semper laoreet nisl. Donec id urna.</p>
		<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi eget elit. Donec pulvinar. Fusce non est ac libero blandit laoreet. Pellentesque iaculis erat. Cras ullamcorper. Vivamus et nibh. Quisque vel leo vitae felis hendrerit fermentum. Donec consectetuer, nunc id mattis elementum, lacus ligula fringilla leo, quis varius lacus turpis sit amet massa. Morbi accumsan ante suscipit ipsum. Curabitur non tellus nec metus venenatis iaculis. Donec tempor nunc. Mauris sit amet erat. Vestibulum sed nulla ac nisl dapibus porta. Praesent a nisi quis nisl cursus tempor. Praesent semper laoreet nisl. Donec id urna.</p>
		<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi eget elit. Donec pulvinar. Fusce non est ac libero blandit laoreet. Pellentesque iaculis erat. Cras ullamcorper. Vivamus et nibh. Quisque vel leo vitae felis hendrerit fermentum. Donec consectetuer, nunc id mattis elementum, lacus ligula fringilla leo, quis varius lacus turpis sit amet massa. Morbi accumsan ante suscipit ipsum. Curabitur non tellus nec metus venenatis iaculis. Donec tempor nunc. Mauris sit amet erat. Vestibulum sed nulla ac nisl dapibus porta. Praesent a nisi quis nisl cursus tempor. Praesent semper laoreet nisl. Donec id urna.</p>
	</div>
</div>

</body>
</html>
Initial URL 
http://www.alistapart.com/articles/conflictingabsolutepositions
Initial Description 

                                

                                                            

                                    

                                        

                                        Initial Title
                                        

                                    

                                    
Full page layout % and px

                                

                                                            

                                    

                                        

                                        Initial Tags
                                        

                                    

                                    
css, html, layout

                                

                                                            

                                    

                                        

                                        Initial Language
                                        

                                    

                                    
HTML