View Full Version : How to Add Dividing Lines?

02-01-2010, 05:59 PM
I want to create horizontal and vertical lines with CSS that divide content such as you see on sites like the NY Times, The Guardian, The Daily Beast, Columbia Journalism Review and others.


Do these sites simply use Border properties? How?

A specific issue I have involves two columns of tabular data that would fit well in a table but I need to put a line dividing the two columns and lines dividing the rows. Can this be done with CSS?

02-01-2010, 06:07 PM
Yes, use borders. The Guardian one for instance. If your data is in individual cells then use the CSS;

td {border-bottom: 1px dotted #666;}

02-01-2010, 06:30 PM
I don't see any tables used at all in the Guardian -- at least the home page, I just looked at. It's all DIVs. Where did you get your TD from?

02-01-2010, 06:36 PM
From your post. You said you wanted to use a table...tabular data so I suggested using td. That is a table cell. Add the styles given to a class if you want to use divs instead.

02-01-2010, 07:04 PM
Hi Corrosive, I did say it was tabular data but I asked if it could be done with CSS rather than a table. I'm not talking tons of rows and columns of numbers, for which I would use a table without question, but three rows and two columns of text and graphics that I would like to separate with horizontal and vertical lines using CSS, if possible. Thanks for your help.

02-01-2010, 07:06 PM

.item {border-bottom: 1px dotted #666}


<div class="item">Your Stuff</div>

No different to the td but you are using a class and a div.

02-01-2010, 07:09 PM
Also, if you want them in two columns then use floats and give the right hand side of the left div a border as well.