CSS Code Example: How to position text in a div with left and right areas

My name is Edward Tanguay. I am a web developer in Berlin, Germany. I learn everything I can and record it on this site.

Other things you might be looking for:

My Ubuntu Tutorial

My Datapod Project

My Blog Feed:

- Code Examples

CSS CODE EXAMPLE - added on June 30, 2008

How to position text in a div with left and right areas

This CSS script give you absolute pixel-exact control of where to place text in a left and right area of a wide div, e.g. a header or footer. I was not able to get it to align automatically, e.g. left/center/right, so you have to know your font size and your text and position things exactly, but at least you have control, checked in Firefox and Explorer.

</head>
	
	<body>

<div id="headerWrapper">
		<div id="areaLeft">
			<p>This is the header text left</p>
		</div>
		<div id="areaRight">
			<p>This is the header text right</p>
		</div>
	</div>
	<div style="clear: both"></div>

<div id="contentWrapper">
		<p>This is a content paragraph.</p>
		<p>This is a content paragraph.</p>
		<p>This is a content paragraph.</p>
		<p>This is a content paragraph.</p>
		<p>This is a content paragraph.</p>
	</div>

</body>
	
</html>

patryksharks321: nice code btw relative is according to the last element and absolute is towards the block it's in right? greetings

post comment or question

Similar Code Examples:

CSS CODE EXAMPLE - added on August 12, 2008

Large button links with A elements

Many times you want to have a menu with A elements as the links instead of e.g. LI elements. Here is an example with large buttons. See example here.

SHOW CODE

post comment or question

CSS CODE EXAMPLE - added on May 20, 2008

Simple CSS-only layout with top menu

Here is a layout for a non-flashy interface for e.g. a website tool. Solves the issue of floating divs with a clear:all div, here's an example.

SHOW CODE

post comment or question

CSS CODE EXAMPLE - added on March 22, 2008

Simple and Expandable CSS Menu

This CSS example shows a simple UL/LI menu absolutely positioned top/left and a line-height of 1em and the body pushes the container div down 1em so that you can expand the font (ctrl-+) and the menu stays relatively sized to the content of the site. Ok, I'm starting to see how if you set even the amount of space between screen objects to the same unit (em) as the font then you have a flexible layout that someone with poor eyesite can just zoom in (I wonder if you could have your graphics expand as well). This is also cool because in the body tag you have font-size: 94% and if you change this then everything stays in proportion as well. Here is a live example.

SHOW CODE

main.css
------------------------------------------
/* bugfix: forces firefox and explorer to treat margin and padding similarly */
* {margin: 0px; padding: 0px;}

body {
	font: 78% Verdana, Arial, Helvetica, sans-serif;
	color: #000;
	padding-top: 1em;
}

a {
	color: purple;
	text-decoration: none;
}

a:hover {
	text-decoration:
}

a img {
	border: 0 none;
}

p {
	margin-bottom: 10px;
	font-size: .8em;
	line-height: 130%;
}

#container {
	padding: 20px;
	border-top: 1px solid navy;
	border-bottom: 1px solid navy;
	border-right: 1px solid navy;
	width: 720px;
	float: left;
	background: transparent url(../images/yellowBall.png) top right no-repeat;
}

#container h1 {
	color: navy;
	background: transparent;
	font-size: 1.5em;
	margin-bottom: 10px;
}

#container ul {
	margin: 0px 0px 10px 40px;
	list-style: url(../images/dot.png);
}

#container img {
	border: 7px solid yellow;
	margin-bottom: 10px;
}

#body_wrapper {
	
	width: 100%;
}

#menu {
	background: navy;
	position: absolute;
	width: 720px;
	top: 0;
	left: 0;
	padding: 0 20px;
	border-right: 1px solid navy;
}

#menu ul {
	top: 0;
	left: 0;
}

#menu li {
	display: inline;
}

#menu a {	
	color: ivory;
	text-decoration: none;
	padding: 0 4px 0 4px;
	line-height: 1em;
}

#menu a:hover {
	color: navy;
	background: #FEFF60;
}

index.htm
--------------------------------------
<!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>Text XHTML Page</title>
		<link href="css/main.css" rel="stylesheet" type="text/css" media="all"/>
	</head>
	
	<body>
	
		<div id="body_wrapper">
			
				<div id="container">
			
						<h1>This is the title</h1>
						<p>This is HTML and <script type="text/javascript">test()</script>, and this is a <a href="http://www.tanguay.info/web">link to another website</a> and this is the rest of the text.</p>
						<p>This is the second paragraph.</p>
						
						<h1>This is the second title</h1>
						<p>Here is a another sentence. Here is a another sentence. Here is a another sentence. Here is a another sentence. Here is a another sentence. Here is a another sentence. Here is a another sentence. Here is a another sentence. Here is a another sentence.
								<ul>
									<li>item number one</li>
									<li>item number two</li>
									<li>item number three</li>
								</ul>
								<img src="images/screenshot.png"/>
						
						</p>
						<p>Here is a another sentence. Here is a another sentence. Here is a another sentence. Here is a another sentence. Here is a another sentence. Here is a another sentence. Here is a another sentence. Here is a another sentence. Here is a another sentence. </p>
		
				</div>		
		
		
		</div>
		
		<div id="menu">
			<ul>
				<li><a href="#">First Page</a></li>
				<li><a href="#">Second Page</a></li>
				<li><a href="#">Third Page</a></li>
			</ul>
		</div>
		
	</body>
	
</html>

post comment or question

CSS CODE EXAMPLE - added on March 21, 2008

Background images relative to CSS file not HTML file

I have always wondered why background images never worked when specified in the CSS file but DID work when specified inline in the HTML tag. The reason is that you have to define the path of the image relative to the position of the CSS file to the image, and inline definitions use the path relative to the position of the HTML file to the image. Nice to know.

SHOW CODE

Patrick Wright: IIRC, this is how CSS Zen Garden handles its magic--each CSS is in its own location and pulls in its own background images relative to the CSS file, which allows the main XHTML file to remain unchanged. We actually missed that aspect of the CSS spec early on in developing our rendering tool. Cheers!

Edward: Thanks for reminding me to go back to CSS Garden and humble myself, that site is so impressive. When I look at the designs with Firefox and Explorer 7 they look exactly the same, I wonder how they look on Explorer 5.0 for mac and Netscape 4 etc. I wonder if you are allowed to use hacks or if it is a purity contest.

post comment or question

CSS CODE EXAMPLE - added on March 8, 2008

Table-less Pure-CSS Form using Fieldset and Label Elements

So finally a form without HTML tables, finally got all the floats: left, right, clear both etc. correct. I have this pretty fixed to a certain size just because I don't like my forms being stretched across the page as the browser area grows (would be ok if the font sizes also grew but they don't so it's just a design integrity issue), if you want this ability (better for expanding the size of the font) just change most of the px values (especially for width and margin) to percent values and your form will stretch as needed. VIEW EXAMPLE HERE.

SHOW CODE

<style>

* {
				margin: 0px;
				padding: 0px;
			}
			
			body {
				font-size: 94%;
				background-color: ivory;
			}
			
			#pageWrapper {
				border: 1px solid #ddd;
				margin: 20px auto;
				position: relative;
				width:90%;
				padding:20px;
				background-color: white;
				min-width: 720px;
			}
			
			#pageHeader {
				font-size: 2em;
				color: #999;
				margin-bottom: 20px;
			}
			
			#pageContent {
			}
			
			#pageFooter{
				font-size: .8em;
				color: #999;
				margin-top: 20px;
				text-align: right;
				font-style: italic;
			}
						
						
						
						
						
			/* FORM STYLES */			
						
			form.default
			{
				background-color: beige;
				padding: 0px;
				width: 420px;
				margin: 10px 0;
				border: 1px solid #ddd;
			}
			
			form.default div.header {
				background-color:#E0DEAF;
				padding: 12px;
			}
			
			form.default div.header p.header {
				font-size: 1.4em;
				color:#222;
			}
			
			form.default div.header p.description {
				font-size: .9em;
				font-style: italic;
				color:#666;
			}
			
			form.default div.content {
				padding: 12px;
			}
			
			form.default fieldset
			{
			  float: none;
			  padding: 10px 10px;
			  border: 0px;
			}
			
			form.default fieldset label
			{
			  float: left;
			  width: 22%;
			  color: #222;
			  font-weight: bold;
			}
			
			form.default div.inputWrapper {
				float:right;
				position: relative;
				font-size: .9em;
				width: 78%;
			}
			
			form.default fieldset input{
				float:left;
				position: relative;
				font-size: .95em;
				width: 100%;	
			}
			
			form.default fieldset select {
				float:left;
				position: relative;
				font-size: .95em;
				width: 101%;	
			}
			
			form.default fieldset input.wholeNumber {
				float:left;
				width: 30px;
				text-align: right;
			}
			
			form.default fieldset input.submitButton {
				float:left;
				position: relative;
				font-size: .8em;
				width: 30%;
				min-width: 60px;	
			}
			
			form.default fieldset p.descriptionAndExample {
				font-size: .8em;
				color: #777;
			}
			
			form.default fieldset p.descriptionAndExample b {
				background-color: #FFFFBB;
			}
			
			br.clear {
				clear: both;
			}

</style>

</head>
	
	<body>
	
	  <div id="pageWrapper">
	
	    <div id="pageHeader">
			<p>This is the header</p>
	    </div>
	
	    <div id="pageContent">
	
	    <p>This is text before the form.</p>
	
	      <form class="default">
	
	      	<div class="header">
	      		<p class="header">Sign Up</p>
	      		<p class="description">Please fill out the following fields and click the button. Only correctly filled out forms can be processed.</p>
	      	</div>
	      	<div class="content">
	
				<fieldset>
					<label for="firstName">First Name:</label>
					<div class="inputWrapper">
						<input id="firstName" />
						<p class="descriptionAndExample">Enter your first name here, e.g. <b>Jim</b></p>
					</div>
				</fieldset>
		
				<fieldset>
					<label for="lastName">Last Name:</label>
					<div class="inputWrapper">
						<input id="lastName" />
						<p class="descriptionAndExample">Enter your last name here, e.g. <b>Thompson</b></p>
					</div>
				</fieldset>
				
				<fieldset>
					<label for="products">Country:</label>
					<div class="inputWrapper">
						<select>
							<option value="de">Germany</option>
							<option value="fr">France</option>
							<option value="uk">England</option>
						</select>
						<p class="descriptionAndExample">Select your country of origin.</p>
					</div>
				</fieldset>	
				
				<fieldset>
					<label for="age">Age:</label>
					<div class="inputWrapper">
						<input id="age" class="wholeNumber"/><br class="clear"/>
						<p class="descriptionAndExample">Enter your age in years, e.g. <b>26</b></p>
					</div>
				</fieldset>
				
				<fieldset>
					<label for="submitButton" class="formLabel"></label>
					<div class="inputWrapper">
						<input id="submitButton" class="submitButton" type="submit" value="Subscribe" />
					</div>
				</fieldset>
				
			</div>
				
	      </form>
	
	      <p>This is text after the form.</p>
	
	    </div>
	
	    <div id="pageFooter">
			<p>This is the footer.</p>
	    </div>
	
	
	  </div>
	
	</body>
	
</html>

post comment or question

CSS CODE EXAMPLE - added on March 4, 2008

Pure CSS Layout: Two Columns, Components, Non-Graphic Hover Menu

Here is a HTML/CSS site layout with no tables, tested in IE7/Firefox, hover menu without graphics and a modular design so you can add components in the two columns as you wish. VIEW EXAMPLE HERE.

SHOW CODE

<!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>new5</title>
		<style type="text/css">
			/* bugfix: forces firefox and explorer to treat margin and padding similarly */
			* {
				margin: 0px;
				padding: 0px;
			}
			
			body {
				font-family: arial, sans-serif;
				font-size: 92%; padding : 20px;
				padding: 20px;
				background-color: #eee;
			}
			
			div#body_wrapper {
				width: 720px;
				border: 1px solid #777;
				margin: 10px auto;
			}
			
			div#header {
				width: 700px;
				background-color: #ccc;
				padding: 10px;
				border-bottom: 1px solid #777;
			}
			
			div#header p {
				font-size: 1.1em;
				font-weight: bold;
			}
			
			
			div#footer {
				width: 700px;
				background-color: #ccc;
				padding: 10px;
				border-top: 1px solid #777;
			}
			
			div#footer p {
				font-size: .7em;
				font-style: italic;
			}
			
			p {
				font-size: 1em;
				line-height: 130%;
			}
			
			div#body_content {
				width: 720px;
				background-color: #fff;
			}
			
			div#column1 {
				float: left;
				width: 320px;
				padding: 20px;
				background-color: #fff;
				border-right: 1px dashed #999;
				
			}
			
			
			
			
			
			div#column2 {
				float: right;
				width: 319px;
				padding: 20px;
			}
			
			
			
			div.clear {
				clear: both;
			}
			
			
			
						
			div.component {
				float: left;
				margin: 5px;
				text-align: left;
				width: 310px;
			}			
						
			div.content {
				margin: 0px;
				padding: 10px 15px 0.7em;
				background-color: #eee;
			}

div.component h1 {
				color: brown;
				font-size: 1.2em;
				padding: 5px;	
				background-color: #ddd;			
			}
			
			div.component div.content p {
				font-size: .9em;
			}
			
			
div.news {
	background-color: beige;
	padding: 10px;
}			
			
.xsnazzy h1, .zsnazzy h1 {
	margin:0;
	font-size:1.2em;
	padding:0 10px 5px 10px;
	border-bottom:1px solid #777;
	color: #222;
}
.xsnazzy p, .zsnazzy p {
	margin:0;
	padding:5px 10px;
	font-size: 1em;
	}
.xsnazzy {
	background: transparent;
	width:310px;
	margin:10px auto;
}

.xtop, .xbottom {display:block; background:transparent; font-size:1px;}
.xb1, .xb2, .xb3, .xb4 {display:block; overflow:hidden;}
.xb1, .xb2, .xb3 {height:1px;}
.xb2, .xb3, .xb4 {background:#fff; border-left:1px solid #777; border-right:1px solid #777;}
.xb1 {margin:0 5px; background:#777;}
.xb2 {margin:0 3px; border-width:0 2px;}
.xb3 {margin:0 2px;}
.xb4 {height:2px; margin:0 1px;}

.xboxcontent {display:block; border:0 solid #555; border-width:0 1px; height:auto;}
* html .xboxcontent {height:1px;}

.color_a {background:orange; color:#000;}
.color_b {background:beige; color:#000;}

#navcontainer ul
{
padding-left: 0;
margin-left: 0;
background-color: #036;
color: White;
float: left;
width: 100%;
font-family: arial, helvetica, sans-serif;
}

#navcontainer ul li { display: inline; }

#navcontainer ul li a
{
padding: 0.2em 1em;
background-color: #036;
color: White;
text-decoration: none;
float: left;
border-right: 1px solid #fff;
}

#navcontainer ul li a:hover
{
background-color: #369;
color: #fff;
}

</style>
	</head>
	
	<body>

<div id="header">
				<p>Title</p>
			</div>

<div id="navcontainer">
<ul id="navlist">
<li id="active"><a href="#" id="current">Products</a></li>
<li><a href="#">Information on Services</a></li>
<li><a href="#">Info</a></li>
<li><a href="#">Help</a></li>
<li><a href="#">News</a></li>
</ul>
</div>
<div class="clear"></div>
	
			
			
			<div id="body_content">
			
				<div id="column1">
				
<div class="xsnazzy">
	<b class="xtop"><b class="xb1"></b><b class="xb2 color_a"></b><b class="xb3 color_a"></b><b class="xb4 color_a"></b></b>
	<div class="xboxcontent">
		<h1 class="color_a">Products</h1>
		<p>This is where you will see all the products listed to which you are subscribed.</p>
	</div>
	<b class="xbottom"><b class="xb4"></b><b class="xb3"></b><b class="xb2"></b><b class="xb1"></b></b>
</div>
				
<div class="xsnazzy">
	<b class="xtop"><b class="xb1"></b><b class="xb2 color_b"></b><b class="xb3 color_b"></b><b class="xb4 color_b"></b></b>
	<div class="xboxcontent">
		<h1 class="color_b">Products</h1>
		<p>This is where you will see all the products listed to which you are subscribed.</p>
	</div>
	<b class="xbottom"><b class="xb4"></b><b class="xb3"></b><b class="xb2"></b><b class="xb1"></b></b>
</div>

<div class="news">
	This is the news.
</div>
				
<div class="xsnazzy">
	<b class="xtop"><b class="xb1"></b><b class="xb2 color_b"></b><b class="xb3 color_b"></b><b class="xb4 color_b"></b></b>
	<div class="xboxcontent">
		<h1 class="color_b">Products</h1>
		<p>This is where you will see all the products listed to which you are subscribed.</p>
	</div>
	<b class="xbottom"><b class="xb4"></b><b class="xb3"></b><b class="xb2"></b><b class="xb1"></b></b>
</div>
	
					
				</div>
			
				<div id="column2">

<div class="xsnazzy">
	<b class="xtop"><b class="xb1"></b><b class="xb2 color_b"></b><b class="xb3 color_b"></b><b class="xb4 color_b"></b></b>
	<div class="xboxcontent">
		<h1 class="color_b">Services</h1>
		<p>This is where you will see all the services listed to which you are subscribed.</p>
	</div>
	<b class="xbottom"><b class="xb4"></b><b class="xb3"></b><b class="xb2"></b><b class="xb1"></b></b>
</div>

</div>
			
				
				<div class="clear"></div>
				
			</div>
			
			<div id="footer">
				<p>This is the footer.</p>
			</div>
			
		</div>

</body>
	
</html>

Patrick Wright: Hi Ed--when I come across CSS samples like this, I usually want to see them in use immediately--if you had a link to the page itself that I could clck on to see the effect that would be great. Cheers, Patrick

Edward: Excellent idea, for now I put a VIEW EXAMPLE HERE link is above. I have planned to make layout examples automatically have thumbnail examples and links to full examples, just not programmed yet. Thanks.

sgt: Thanks for posting great tips and code snippets that can save some effort for beginners.

post comment or question

CSS CODE EXAMPLE - added on February 29, 2008

Pure CSS Layout: Two Columns, Centered with Rounded Box Components

This layout has two columns with a dividing line in the middle (bug: which only goes down to the bottom if MORE content is on the left side than on the right side) and it is filled with rounded boxes with various colored headers, all done without graphics, which is very nice. This would be good code to get into presentation objects so these things are very easy to make and drag- and droppable.

SHOW CODE

<!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>Test3</title>
		<style type="text/css">
			/* bugfix: forces firefox and explorer to treat margin and padding similarly */
			* {
				margin: 0px;
				padding: 0px;
			}
			
			body {
				font-family: arial, sans-serif;
				font-size: 92%; padding : 20px;
				padding: 20px;
				background-color: #eee;
			}
			
			div#body_wrapper {
				width: 720px;
				border: 1px solid #777;
				margin: 10px auto;
			}
			
			div#header {
				width: 700px;
				background-color: #ccc;
				padding: 10px;
				border-bottom: 1px solid #777;
			}
			
			div#header p {
				font-size: 1.1em;
				font-weight: bold;
			}
			
			
			div#footer {
				width: 700px;
				background-color: #ccc;
				padding: 10px;
				border-top: 1px solid #777;
			}
			
			div#footer p {
				font-size: .7em;
				font-style: italic;
			}
			
			p {
				font-size: 1em;
				line-height: 130%;
			}
			
			div#body_content {
				width: 720px;
				background-color: #fff;
			}
			
			div#column1 {
				float: left;
				width: 320px;
				padding: 20px;
				background-color: #fff;
				border-right: 1px dashed #999;
				
			}
			
			
			
			
			
			div#column2 {
				float: right;
				width: 319px;
				padding: 20px;
			}
			
			
			
			div.clear {
				clear: both;
			}
			
			
			
						
			div.component {
				float: left;
				margin: 5px;
				text-align: left;
				width: 310px;
			}			
						
			div.content {
				margin: 0px;
				padding: 10px 15px 0.7em;
				background-color: #eee;
			}

div.component h1 {
				color: brown;
				font-size: 1.2em;
				padding: 5px;	
				background-color: #ddd;			
			}
			
			div.component div.content p {
				font-size: .9em;
			}
			
			
.xsnazzy h1, .zsnazzy h1 {
	margin:0;
	font-size:1.2em;
	padding:0 10px 5px 10px;
	border-bottom:1px solid #777;
}
.xsnazzy p, .zsnazzy p {
	margin:0;
	padding:5px 10px;
	font-size: 1em;
	}
.xsnazzy {
	background: transparent;
	width:310px;
	margin:10px auto;
}

.xboxcontent {display:block; border:0 solid #555; border-width:0 1px; height:auto;}
* html .xboxcontent {height:1px;}

.color_a {background:brown; color:ivory}
.color_b {background:beige; color:#000;}
						
						
		</style>
	</head>
	
	<body>

<div id="header">
				<p>Site Title</p>
			</div>
			
			<div id="body_content">
			
				<div id="column1">
				
<div class="xsnazzy">
	<b class="xtop"><b class="xb1"></b><b class="xb2 color_a"></b><b class="xb3 color_a"></b><b class="xb4 color_a"></b></b>
	<div class="xboxcontent">
		<h1 class="color_a">Header</h1>
		<p>This is the text that you will see here. This is the text that will see here. </p>
	</div>
	<b class="xbottom"><b class="xb4"></b><b class="xb3"></b><b class="xb2"></b><b class="xb1"></b></b>
</div>
				
<div class="xsnazzy">
	<b class="xtop"><b class="xb1"></b><b class="xb2 color_b"></b><b class="xb3 color_b"></b><b class="xb4 color_b"></b></b>
	<div class="xboxcontent">
		<h1 class="color_b">Header</h1>
		<p>This is the text that you will see here. This is the text that will see here. </p>
	</div>
	<b class="xbottom"><b class="xb4"></b><b class="xb3"></b><b class="xb2"></b><b class="xb1"></b></b>
</div>
				
<div class="xsnazzy">
	<b class="xtop"><b class="xb1"></b><b class="xb2 color_b"></b><b class="xb3 color_b"></b><b class="xb4 color_b"></b></b>
	<div class="xboxcontent">
		<h1 class="color_b">Header</h1>
		<p>This is the text that you will see here. This is the text that will see here. </p>
	</div>
	<b class="xbottom"><b class="xb4"></b><b class="xb3"></b><b class="xb2"></b><b class="xb1"></b></b>
</div>
	
					
				</div>
			
				<div id="column2">

<div class="xsnazzy">
	<b class="xtop"><b class="xb1"></b><b class="xb2 color_b"></b><b class="xb3 color_b"></b><b class="xb4 color_b"></b></b>
	<div class="xboxcontent">
		<h1 class="color_b">Header</h1>
		<p>This is the text that you will see here. This is the text that will see here. </p>
	</div>
	<b class="xbottom"><b class="xb4"></b><b class="xb3"></b><b class="xb2"></b><b class="xb1"></b></b>
</div>

</div>
			
				
				<div class="clear"></div>
				
			</div>
			
			<div id="footer">
				<p>This is the footer.</p>
			</div>
			
		</div>

</body>
	
</html>

post comment or question

CSS CODE EXAMPLE - added on February 14, 2008

CSS for a three-column layout

This was my first fully non-table column-layout in CSS that I am satisfied with, note that if you put the width of the body_wrapper to 100% it will also work but a user can scrunch the whole site back to the left, which isn't really desirable, and min_width can't really be relied upon from my experience but that my be a solution, a solid px width works well though, with this layout you just have to be sure that your graphics are less wide than your column widths or they will hang over into the next column, unlike the nice feature of tables where the column expands to the width of the widest graphic. See the example here.

SHOW CODE

index.htm
-----------------------------------------------
<!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>Text XHTML Page</title>
		<link href="css/main.css" rel="stylesheet" type="text/css" media="all"/>
	</head>
	
	<body>
	
				<div id="body_wrapper">
				
					<div class="column">
					
						<div class="component">
							<div class="content">
								<p>
									<img class="inContent" src="images/test.jpg"/>
									this is a test<br/>
									this too<br/>

</p>
							</div>
						</div>
					
						<div class="component">
							<div class="header">
								Introduction
							</div>
							<div class="content">
								<p>
									This is a text that is going to be very long and word-break. This is a text that is going to be very long and word-break. This is a text that is going to be very long and word-break. This is a text that is going to be very long and word-break. This is a text that is going to be very long and word-break. This is a text that is going to be very long and word-break. This is a text that is going to be very long and word-break. This is a text that is going to be very long and word-break. This is a text that is going to be very long and word-break. This is a text that is going to be very long and word-break. This is a text that is going to be very long and word-break.
								</p>
							</div>
						</div>
						
					</div>
				
					<div class="column">
					
						<div class="component">
							<div class="content">
								<p>
								<img class="inContent" src="images/test.jpg	"/>
								test<br/>
								- test2<br/>
								- test3<br/>
								<br/>
								...
								</p>
							</div>
						</div>
					
						<div class="component">
							<div class="header">
								Introduction
							</div>
							<div class="content">
								<p>
									This is a text that is going to be very long and word-break. This is a text that is going to be very long and word-break. This is a text that is going to be very long and word-break. This is a text that is going to be very long and word-break. This is a text that is going to be very long and word-break. This is a text that is going to be very long and word-break. This is a text that is going to be very long and word-break. This is a text that is going to be very long and word-break. This is a text that is going to be very long and word-break. This is a text that is going to be very long and word-break. This is a text that is going to be very long and word-break.
								</p>
							</div>
						</div>
						
					</div>
				
					<div class="column">
						<div class="component">
							<div class="content">
								<p>
								<img class="inContent" src="images/test.jpg	"/>
									 This is a text that is going to be very long and word-break. This is a text that is going to be very long and word-break. This is a text that is going to be very long and word-break. This is a text that is going to be very long and word-break. This is a text that is going to be very long and word-break. This is a text that is going to be very long and word-break. This is a text that is going to be very long and word-break. This is a text that is going to be very long and word-break. This is a text that is going to be very long and word-break.
								</p>
							</div>
						</div>
					</div>
				
				
			</div>

</body>
	
</html>

main.css
--------------------------------------------------------
/* bugfix: forces firefox and explorer to treat margin and padding similarly */
* {
	margin: 0px;
	padding: 0px;
}

body {
	font-family: arial, sans-serif;
	padding: 20px;
}

div#body_wrapper {
	background-color: #eee;
	width: 1024px;
}

div.column {
	float: left;
	margin: 0px 1% 0px 0px;
	width: 32%;
}

div.component {
	background-color: #eee;
	float: left;
	margin: 5px 0px 5px 15px;
	text-align: left;
	width: 100%;
}

div.header {
	padding: 10px 0px 0px 20px;
}

div.content {
	color: black;
	margin: 0pt;
	padding: 10px 15px 0.7em;
}

img.inContent {
	display: block;
	margin-left: auto;
	margin-right: auto;
	margin-top: 20px;
	margin-bottom: 20px;
}

p {
	background-color: #fff;
	padding: 20px;
}

post comment or question

CSS CODE EXAMPLE - added on December 3, 2007

Base CSS for making a data table with divs and spans

If you need to avoid HTML tables but need to order information in rows and columsn, etc. start with this code.

SHOW CODE

post comment or question

My Free Tutorials:

How to Install the Android SDK on Windows XP and Create an Application that Runs in the Cell Phone Emulator

How to Create a Website with Datapod

Install Fedora 6 in VMWare on Windows XP and connect it to your network

Install Perl 5 on Windows XP and Get a Perl Hello World Running

Install OpenSuse 10.2 in VMWare on Windows XP and connect it to your network

Install Ubuntu 7.04 in VMWare on Windows XP and connect it to your network

Install Java on Windows XP and Learn the Basics of Java 6 using the NetBeans IDE

Setup a PHP Development Environment on Windows XP With Apache, PHP 5, MySQL 5, SQLite, Eclipse, Subversion, PHPMyAdmin, and Datapod

Install a PHP Development Environment with Eclipse PDT, Apache 2.2, PHP 5, MySQL 5, and phpMyAdmin Using XAMPP Lite

How to Install Ruby on Rails with Instant Rails and Create a Website Using JEdit and the Ruby Plugin