CSS problem.

[malef!c]

Hey all.

Trying to right a row of data in CSS.
4 columns, 1st column is in bold and the last 3 are normal strength.

The CSS bit I have put together is:

#row1
{
	background-color: #ccc;
	border-bottom: 1px solid #aaa;
	padding-bottom: 2px;
}

#row2
{
	background-color: #fff;
	border-bottom: 1px solid #aaa;
	padding-bottom: 2px;
}

#rowhead
{
	font-weight: bold;
	width: 200px;
}

#col1
{
	padding-left: 205px;
}

#col2
{
	padding-left: 410px;
}

#col3
{
	padding-left: 615px;
}

and the HTML:

<div id = "row1">
				<div id = "rowhead">HEADER1</div>
				<div id = "col1">column 1</div>
				<div id = "col2">column 2</div>
				<div id = "col3">column 3</div>
			</div>
			
			<div id = "row2">
				<div id = "rowhead">HEADER1</div>
				<div id = "col1">column 1</div>
				<div id = "col2">column 2</div>
				<div id = "col3">column 3</div>
			</div>

However, the result is a bit stuffed - the text is stepped:

What did I do wrong - CSS new boy really

Cheers!

 

[malef!c]

cheers all - was under the impression that tables were frowned upon still.
Makes it a lot easier with a table