Virtual Assistant Forums | Work from Home

Offsite Office Professionals · #1 (**permalink**) 01-28-2009

I am trying to set up 3 columns using CSS and I'm stuck. I'm trying to set up a physician directory on a hospital web site. I want to list physicians names, phone number and speciality but can't get the columns spaced correctly. Any help would be appreciated.

Each line just looks like I've type each item without columns.

Thanks in advance.

Jenny

Jacee · #2 (**permalink**) 02-01-2009

I'm not sure what you mean. Do you mean that the columns are not in the right place or that the page doesn't look like there are any columns at all?

In a CSS template, unless you define your columns with a background color or borders, you can't see them at all - even though they may be there.

If you mean that the columns are not in the correct place, I could help you with that if I could see the CSS code. A left-side column would have a width and some padding, would either float left or be absolute. A right-side column would have a width, padding, and could either float right or begin at a specified pixel point. All, of course, would be contained in "container" with a defined width.

I hope this helps, but without more specifics, I'm not sure I helped you.

Codehead · #3 (**permalink**) 02-01-2009

Hey, here is a very basic CSS 3 column layout: (Copy and paste it in a new HTML file and view it)

HTML 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>3C</title>
	
   <style type="text/css">
		body {
			min-width: 800px;
			text-align: center;
		}
		#main {
			width: 800px;
			text-align: left;
			margin: 0 auto;
		}
		
		#c1 {
			width: 180px;
			float: left;
			border: 1px dashed #999999; /* Just to show where everything is, remove if you want */
		}
		#c2 {
			width: 400px;
			float: left;
			margin-left: 16px;
			border: 1px dashed #999999; /* Just to show where everything is, remove if you want */
		}
		#c3 {
			width: 180px;
			float: left;
			margin-left: 16px;
			border: 1px dashed #999999; /* Just to show where everything is, remove if you want */
		}
	</style>
   
</head>

<body>
<div id="main">
	
   <div id="c1">
   	Column 1<br />
      Column 1<br />
      Column 1<br />
      Column 1<br />
   </div>
   
   <div id="c2">
   	Column 2<br />
      Column 2<br />
      Column 2<br />
      Column 2<br />
      Column 2<br />
      Column 2<br />
      Column 2<br />
      Column 2<br />
   </div>
   
   <div id="c3">
   	Column 3<br />
      Column 3<br />
      Column 3<br />
   </div>

</div>
</body>
</html>

This was tested in IE, FF, Opera, Google Chrome and Safari and if you know a little CSS, you will learn how it works by studying the code, it's very simple.

I hope this helps

Offsite Office Professionals · #4 (**permalink**) 02-01-2009

Thanks so much Jacee and Codehead. I also got code from another forum and the columns are working but I'll copy this code for future reference also.

Jenny

Virtual Assistant Forums | Work from Home

Website Coding

Stuck on a line of code? Find resources and post your coding questions here.

YOUR VIRTUAL ASSISTANT BUSINESS WEBSITE

Website Coding

columns in CSS help please