advanced search

We Recommend

CSS: The Definitive Guide CSS: The Definitive Guide
Provides you with a comprehensive guide to CSS implementation, along with a thorough review of all aspects of CSS 2.1. Updated to cover Internet Explorer 7, Microsoft's vastly improved browser, this new edition includes content on positioning, text wrapping (nowrap), lists and generated content, table layout, user interface, paged media, and more.

Posted By

penguin999 on 07/22/07


Tagged

css layout fluid fixed


Versions (?)


Who likes this?

1 person has marked this snippet as a favorite

basicmagic


Conflicting Absolute Positions

Published in: CSS 

URL: http://www.alistapart.com/articles/conflictingabsolutepositions

this layout has a fixed width sidebar and a fluid main body.


Plain TextExpand 
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >
  3. <head>
  4.  
  5. <title>Conflicting Absolute Positions - Demonstration layout 1</title>
  6.  
  7. <link type="text/css" rel="stylesheet" href="style.css" media="screen" />
  8.  
  9. <style type="text/css">
  10.  
  11. html {
  12. 	overflow: hidden;
  13. }
  14.  
  15. body {
  16. 	overflow: hidden;
  17. 	padding: 0;
  18. 	margin: 0;
  19. 	width: 100%;
  20. 	height: 100%;
  21. }
  22.  
  23. #top {
  24. 	padding: 0;
  25. 	margin: 0;
  26. 	position: absolute;
  27. 	top: 0px;	
  28. 	left: 0px;
  29. 	width: 100%;
  30. 	height: 80px;
  31. 	overflow: hidden;
  32. }
  33.  
  34. #main {
  35. 	padding: 0;
  36. 	margin: 0;
  37. 	position: absolute;	
  38. 	top: 100px;
  39. 	left: 240px;
  40. 	right: 20px;
  41. 	bottom: 20px;
  42. 	overflow: auto;
  43. }
  44.  
  45. #side {	
  46. 	padding: 0;
  47. 	margin: 0;
  48. 	position: absolute;	
  49. 	top: 100px;
  50. 	left: 20px;
  51. 	bottom: 20px;
  52. 	width: 200px;
  53. 	overflow: auto;	
  54. }
  55.  
  56. </style>
  57.  
  58. <!--[if lt IE 7]>
  59. <style type="text/css">
  60.  
  61. #main {
  62. 	height:expression(document.body.clientHeight-120); /* 80+20+20=120 */
  63. 	width:expression(document.body.clientWidth-260); /* 200+20+20+20=260 */
  64. }
  65.  
  66. #side {
  67. 	height:expression(document.body.clientHeight-120); /* 80+20+20=120 */
  68. }
  69.  
  70. </style>
  71. <![endif]-->
  72.  
  73. </head>
  74.  
  75. <body>
  76.  
  77. <div id="top">
  78. 	<div class="content">
  79. 		<h2>Header</h2>
  80. 	</div>
  81. </div>
  82.  
  83. <div id="side">
  84. 	<div class="content">
  85. 		<h2>Sidebar</h2>
  86.  
  87. 		<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>
  88. 		<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>
  89. 	</div>
  90. </div>
  91.  
  92. <div id="main">
  93. 	<div class="content">
  94. 		<h2>Main content</h2>
  95. 		<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>
  96.  
  97. 		<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>
  98. 		<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>
  99. 		<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>
  100. 		<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>
  101. 		<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>
  102. 		<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>
  103.  
  104. 	</div>
  105. </div>
  106.  
  107. </body>
  108. </html>

Report this snippet 

You need to login to post a comment.