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!

 

[djkav]

Thats a mis-use of DIVs if you ask me. Same thing as a mis-use of tables.

Why don't you just use a TABLE?

Tables are still allowed in XHTML. Tables are used for displaying tabular data, yes even in CSS. We just don't use TABLEs for layout and design.

If you must insist on not using TABLEs (and I don't know why, as you demonstrated that your data fits a table format) then UL (Unordered Lists) will be you 2nd best option.

 

[xiphrex]

You have to use floats.

A div has display:block; by default, so it fits the width of the container its in in your example. Restricting the width wont make a difference either.

You need to put float:left; on all your divs inside row1 and row2. You also then need to provide a width.

Or you can use absolute positioning with relative positioning of the row1 and row2 instead of floats.

Or you can just use a table (the easiest method! And it fits your tabular data)

 

[malef!c]

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

 

[djkav]

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

Nope, tables are still used for tabular data. Thats the orginial use of tables.

It was only frowned upon because it got mis-used as a layout tool instead.

You can have DIV-hell which is the opposite of TABLE-hell.

Learn how to use UL (Unordered Lists) as well. That will save you lots of DIV overuse.
Also learn about FLOATs too. They're a must if you want to place things next to each other, like 3 DIVs in columns.

Really, its all about choosing the correct elements for what your doing. DIVs are so easily abused.

Here is a great CSS resource to aid your future designing
http://www.smashingmagazine.com/