You Are Here Home > CSS

CSS

Enforce a Minimum Height For a Box

Here is the CSS:

.your-element {
   height: 500px;
   min-height: 500px;
   height: auto;
}

Of course, you might change 500px to whatever height you wish…

Enforce a Minimum Height For a Box
Comments (0)   Filed under: CSS   Posted by: Codehead on October 28, 2009

Multi Column Lists

Assuming that we want a 2 column list, here is the CSS:

ul#multi-column-list {
	width: 200px;
}
 
ul#multi-column-list li {
	width: 100px;
	float: left;
}

And HTML:

<ul id="multi-column-list">
   <li>Left</li>
   <li>Right</li>
   <li>Left</li>
   <li>Right</li>
   <li>Left Again</li>
   <li>Right Again</li>
</ul>

As you can see when the ul is 200pxs and lis are each 100pxs in width, your list will be arranged in 2 columns, so if you want to create a 4 column list, set the li’s width to 50px:

ul#multi-column-list {
	width: 200px;
}
 
ul#multi-column-list li {
	width: 50px;
	float: left;
}

HTML:

<ul id="multi-column-list">
   <li>1</li>
   <li>2</li>
   <li>3</li>
   <li>4</li>
   <li>1</li>
   <li>2</li>
   <li>3</li>
   <li>4</li>
</ul>
Multi Column Lists
Comments (0)   Filed under: CSS   Posted by: Hamid on October 1, 2009

Fluid 2 Column Layout – w Right Sidebar, Header & Footer

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Fluid 2 Column - Right Sidebar</title>
 
   <style type="text/css">
		/**
		 * Please note: borders are just to show you the boundaries, you will probably want to remove prior to use unless you like them...
		**/
 
		#header {
			border: 1px solid #9900FF;
		}
 
		#side-bar {
			width: 200px;
			float: right;
			border: 1px solid #993300;
		}
 
		#contents {
			margin-right: 220px;
			border: 1px solid #0099FF;
		}
 
		#footer {
			border: 1px solid #669900;
		}
 
	</style>
 
</head>
 
<body>
 
   <div id="header">
   	Logo and menu here
   </div>
 
   <div id="side-bar">
   	I'm the side bar
   </div>
 
   <div id="contents">
   	Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec massa nibh, feugiat ut condimentum nec, ullamcorper nec ipsum. Cras vitae dolor nisl, ut scelerisque libero. Etiam nisi velit, pulvinar in volutpat posuere, venenatis nec justo. Curabitur imperdiet tellus tincidunt turpis venenatis a aliquet augue rutrum. Aliquam mattis lacus sed urna fringilla non pretium dolor sodales. Curabitur dapibus risus vitae libero dignissim et tristique enim ullamcorper. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum non magna ipsum. Nunc sem neque, scelerisque auctor sodales blandit, pretium sit amet quam. Duis sed turpis mi, a eleifend dui. Mauris pellentesque pretium tincidunt. Fusce sit amet massa quis dui ornare feugiat. Integer consequat purus et est tempus feugiat. Praesent a libero quis leo commodo blandit in at elit. Nunc faucibus sapien id magna vehicula ac pellentesque quam volutpat. Vivamus condimentum faucibus urna a molestie. Phasellus auctor arcu id enim feugiat porta. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
   </div>
 
   <div id="footer">
   	&copy;/sitemap stuff here
   </div>
 
</body>
</html>
 
<!--
  _            __             
 / )  _/'  _  /__)_ _ '  _  _ 
(__()(///)(/ / ( (-( //)(-_)  
         _/          /       
-->
Fluid 2 Column Layout – w Right Sidebar, Header & Footer
Comments (0)   Filed under: CSS   Posted by: Hamid on

Fluid 2 Column Layout – w Left Sidebar, Header & Footer

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Fluid 2 Column - Left Sidebar</title>
 
   <style type="text/css">
		/**
		 * Please note: borders are just to show you the boundaries, you will probably want to remove prior to use unless you like them...
		**/
 
		#header {
			border: 1px solid #9900FF;
		}
 
		#side-bar {
			width: 200px;
			float: left;
			border: 1px solid #993300;
		}
 
		#contents {
			margin-left: 220px;
			border: 1px solid #0099FF;
		}
 
		#footer {
			border: 1px solid #669900;
		}
 
	</style>
 
</head>
 
<body>
 
   <div id="header">
   	Logo and menu here
   </div>
 
   <div id="side-bar">
   	I'm the side bar
   </div>
 
   <div id="contents">
   	Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec massa nibh, feugiat ut condimentum nec, ullamcorper nec ipsum. Cras vitae dolor nisl, ut scelerisque libero. Etiam nisi velit, pulvinar in volutpat posuere, venenatis nec justo. Curabitur imperdiet tellus tincidunt turpis venenatis a aliquet augue rutrum. Aliquam mattis lacus sed urna fringilla non pretium dolor sodales. Curabitur dapibus risus vitae libero dignissim et tristique enim ullamcorper. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum non magna ipsum. Nunc sem neque, scelerisque auctor sodales blandit, pretium sit amet quam. Duis sed turpis mi, a eleifend dui. Mauris pellentesque pretium tincidunt. Fusce sit amet massa quis dui ornare feugiat. Integer consequat purus et est tempus feugiat. Praesent a libero quis leo commodo blandit in at elit. Nunc faucibus sapien id magna vehicula ac pellentesque quam volutpat. Vivamus condimentum faucibus urna a molestie. Phasellus auctor arcu id enim feugiat porta. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
   </div>
 
   <div id="footer">
   	&copy;/sitemap stuff here
   </div>
 
</body>
</html>
 
<!--
  _            __             
 / )  _/'  _  /__)_ _ '  _  _ 
(__()(///)(/ / ( (-( //)(-_)  
         _/          /       
-->
Fluid 2 Column Layout – w Left Sidebar, Header & Footer
Comments (0)   Filed under: CSS   Posted by: Hamid on

Fixed Centered 2 Column Layout – w Right Sidebar, Header & Footer

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Fixed Centered 2 Column Layout - Right Sidebar Header</title>
 
   <style type="text/css">
		/**
		 * Please note: borders are just to show you the boundaries, you will probably want to remove prior to use unless you like them...
		**/
 
		body {
			min-width: 800px;
			text-align: center;
		}
 
		#main-wrapper {
			width: 800px;
			margin: auto;
			text-align: left;
			border: 1px solid #CCCCCC;
		}
 
		#header {
			border: 1px solid #9900FF;
		}
 
		#side-bar {
			width: 200px;
			float: right;
			border: 1px solid #993300;
		}
 
		#contents {
			margin-right: 220px;
			border: 1px solid #0099FF;
		}
 
		#footer {
			border: 1px solid #669900;
		}
 
	</style>
 
</head>
 
<body>
<div id="main-wrapper">
 
   <div id="header">
   	Logo and menu here
   </div>
 
   <div id="side-bar">
   	I'm the side bar
   </div>
 
   <div id="contents">
   	Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec massa nibh, feugiat ut condimentum nec, ullamcorper nec ipsum. Cras vitae dolor nisl, ut scelerisque libero. Etiam nisi velit, pulvinar in volutpat posuere, venenatis nec justo. Curabitur imperdiet tellus tincidunt turpis venenatis a aliquet augue rutrum. Aliquam mattis lacus sed urna fringilla non pretium dolor sodales. Curabitur dapibus risus vitae libero dignissim et tristique enim ullamcorper. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum non magna ipsum. Nunc sem neque, scelerisque auctor sodales blandit, pretium sit amet quam. Duis sed turpis mi, a eleifend dui. Mauris pellentesque pretium tincidunt. Fusce sit amet massa quis dui ornare feugiat. Integer consequat purus et est tempus feugiat. Praesent a libero quis leo commodo blandit in at elit. Nunc faucibus sapien id magna vehicula ac pellentesque quam volutpat. Vivamus condimentum faucibus urna a molestie. Phasellus auctor arcu id enim feugiat porta. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
   </div>
 
   <div id="footer">
   	&copy;/sitemap stuff here
   </div>
 
</div>
</body>
</html>
 
<!--
  _            __             
 / )  _/'  _  /__)_ _ '  _  _ 
(__()(///)(/ / ( (-( //)(-_)  
         _/          /       
-->
Fixed Centered 2 Column Layout – w Right Sidebar, Header & Footer
Comments (0)   Filed under: CSS   Posted by: Hamid on

Fixed Centered 2 Column Layout – w Left Sidebar, Header & Footer

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Fixed Centered 2 Column - Left Sidebar</title>
 
   <style type="text/css">
		/**
		 * Please note: borders are just to show you the boundaries, you will probably want to remove prior to use unless you like them...
		**/
 
		body {
			min-width: 800px;
			text-align: center;
		}
 
		#main-wrapper {
			width: 800px;
			margin: auto;
			text-align: left;
			border: 1px solid #CCCCCC;
		}
 
		#header {
			border: 1px solid #9900FF;
		}
 
		#side-bar {
			width: 200px;
			float: left;
			border: 1px solid #993300;
		}
 
		#contents {
			margin-left: 220px;
			border: 1px solid #0099FF;
		}
 
		#footer {
			border: 1px solid #669900;
		}
 
	</style>
 
</head>
 
<body>
<div id="main-wrapper">
 
   <div id="header">
   	Logo and menu here
   </div>
 
   <div id="side-bar">
   	I'm the side bar
   </div>
 
   <div id="contents">
   	Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec massa nibh, feugiat ut condimentum nec, ullamcorper nec ipsum. Cras vitae dolor nisl, ut scelerisque libero. Etiam nisi velit, pulvinar in volutpat posuere, venenatis nec justo. Curabitur imperdiet tellus tincidunt turpis venenatis a aliquet augue rutrum. Aliquam mattis lacus sed urna fringilla non pretium dolor sodales. Curabitur dapibus risus vitae libero dignissim et tristique enim ullamcorper. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum non magna ipsum. Nunc sem neque, scelerisque auctor sodales blandit, pretium sit amet quam. Duis sed turpis mi, a eleifend dui. Mauris pellentesque pretium tincidunt. Fusce sit amet massa quis dui ornare feugiat. Integer consequat purus et est tempus feugiat. Praesent a libero quis leo commodo blandit in at elit. Nunc faucibus sapien id magna vehicula ac pellentesque quam volutpat. Vivamus condimentum faucibus urna a molestie. Phasellus auctor arcu id enim feugiat porta. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
   </div>
 
   <div id="footer">
   	&copy;/sitemap stuff here
   </div>
 
</div>
</body>
</html>
 
<!--
  _            __             
 / )  _/'  _  /__)_ _ '  _  _ 
(__()(///)(/ / ( (-( //)(-_)  
         _/          /       
-->
Fixed Centered 2 Column Layout – w Left Sidebar, Header & Footer
Comments (0)   Filed under: CSS   Posted by: Hamid on

Fixed Centered 2 Column Layout – Right Sidebar

You may want to remove the borders prior to use:

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Fixed Centered 2 Column Layout - Right Sidebar</title>
 
   <style type="text/css">
		/**
		 * Please note: borders are just to show you the boundaries, you will probably want to remove prior to use unless you like them...
		**/
 
		body {
			min-width: 800px;
			text-align: center;
		}
 
		#main-wrapper {
			width: 800px;
			margin: auto;
			text-align: left;
			border: 1px solid #CCCCCC;
		}
 
		#side-bar {
			width: 200px;
			float: right;
			border: 1px solid #993300;
		}
 
		#contents {
			margin-right: 220px;
			border: 1px solid #0099FF;
		}
 
	</style>
 
</head>
 
<body>
<div id="main-wrapper">
 
   <div id="side-bar">
   	I'm the side bar
   </div>
 
   <div id="contents">
   	Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec massa nibh, feugiat ut condimentum nec, ullamcorper nec ipsum. Cras vitae dolor nisl, ut scelerisque libero. Etiam nisi velit, pulvinar in volutpat posuere, venenatis nec justo. Curabitur imperdiet tellus tincidunt turpis venenatis a aliquet augue rutrum. Aliquam mattis lacus sed urna fringilla non pretium dolor sodales. Curabitur dapibus risus vitae libero dignissim et tristique enim ullamcorper. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum non magna ipsum. Nunc sem neque, scelerisque auctor sodales blandit, pretium sit amet quam. Duis sed turpis mi, a eleifend dui. Mauris pellentesque pretium tincidunt. Fusce sit amet massa quis dui ornare feugiat. Integer consequat purus et est tempus feugiat. Praesent a libero quis leo commodo blandit in at elit. Nunc faucibus sapien id magna vehicula ac pellentesque quam volutpat. Vivamus condimentum faucibus urna a molestie. Phasellus auctor arcu id enim feugiat porta. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
   </div>
 
</div>
</body>
</html>
 
<!--
  _            __             
 / )  _/'  _  /__)_ _ '  _  _ 
(__()(///)(/ / ( (-( //)(-_)  
         _/          /       
-->
Fixed Centered 2 Column Layout – Right Sidebar
Comments (0)   Filed under: CSS   Posted by: Hamid on

Fixed Centered 2 Column Layout – Left Sidebar

You may want to remove the borders prior to use:

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Fixed Centered 2 Column - Left Sidebar</title>
 
   <style type="text/css">
		/**
		 * Please note: borders are just to show you the boundaries, you will probably want to remove prior to use unless you like them...
		**/
 
		body {
			min-width: 800px;
			text-align: center;
		}
 
		#main-wrapper {
			width: 800px;
			margin: auto;
			text-align: left;
			border: 1px solid #CCCCCC;
		}
 
		#side-bar {
			width: 200px;
			float: left;
			border: 1px solid #993300;
		}
 
		#contents {
			margin-left: 220px;
			border: 1px solid #0099FF;
		}
 
	</style>
 
</head>
 
<body>
<div id="main-wrapper">
 
   <div id="side-bar">
   	I'm the side bar
   </div>
 
   <div id="contents">
   	Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec massa nibh, feugiat ut condimentum nec, ullamcorper nec ipsum. Cras vitae dolor nisl, ut scelerisque libero. Etiam nisi velit, pulvinar in volutpat posuere, venenatis nec justo. Curabitur imperdiet tellus tincidunt turpis venenatis a aliquet augue rutrum. Aliquam mattis lacus sed urna fringilla non pretium dolor sodales. Curabitur dapibus risus vitae libero dignissim et tristique enim ullamcorper. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum non magna ipsum. Nunc sem neque, scelerisque auctor sodales blandit, pretium sit amet quam. Duis sed turpis mi, a eleifend dui. Mauris pellentesque pretium tincidunt. Fusce sit amet massa quis dui ornare feugiat. Integer consequat purus et est tempus feugiat. Praesent a libero quis leo commodo blandit in at elit. Nunc faucibus sapien id magna vehicula ac pellentesque quam volutpat. Vivamus condimentum faucibus urna a molestie. Phasellus auctor arcu id enim feugiat porta. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
   </div>
 
</div>
</body>
</html>
 
<!--
  _            __             
 / )  _/'  _  /__)_ _ '  _  _ 
(__()(///)(/ / ( (-( //)(-_)  
         _/          /       
-->
Fixed Centered 2 Column Layout – Left Sidebar
Comments (0)   Filed under: CSS   Posted by: Hamid on

Create a Centered Page – Fixed Page

This is the most simple form of a centered web page:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Centered Page</title>
 
	<style type="text/css">
		body {
			min-width: 800px;
			text-align: center;
		}
		#main-wrapper {
			width: 800px;
			margin-left: auto;
			margin-right: auto;
			text-align: left;
		}
	</style>
 
</head>
 
<body>
<div id="main-wrapper">
	Centered Page
</div>
</body>
</html>
Create a Centered Page – Fixed Page
Comments (0)   Filed under: CSS   Posted by: Codehead on September 18, 2009

Absolute Positioning an Element Relative To a Box/DIV

In order to do this, you must position the parent box relative, you don’t need to set the left/right or top/bottom necessarily, just a:

.ab-parent-box {
   position: relative;
}

Will do the trick…

Absolute Positioning an Element Relative To a Box/DIV
Comments (0)   Filed under: CSS   Posted by: Codehead on May 23, 2009
Older Posts »