View Full Version : Need CSS to perform table behavior

08-11-2010, 10:38 AM
Alright, so I have this issue that I'm sure is addressed all over the internet, however I do not know what to search for. The issue is, I'm trying to get 2 divs to behave like a table would. The general idea is this: I have a table with 1 row, 2 columns, and in column 1 is text (broken by a space) and in column 2, I have a styled div designed to look like a small bar (4px in height). What is around this is a div, the main container with a width of 80%. Basically I need the bar to be within 10px of whatever text is in the first column. This is possible by setting the second column's width to 100%, however this breaks the text where the space is and puts it on the line below. I cannot get CSS to work properly so that the bar can be positioned in the vertical center of the text, and 10px away from the text. Here's what I have that works, but it only works because I'm using a special 'space' character that does not break in tables. I'd prefer not to use hacks.

.title-bar {height:4px;width:100%;}

<table width="100%" border="0">
<td style="padding-right:10px;"><div class="title">The*Text</div></td>
<td width="100%"><div class="title-bar green"></div></td>
Note, the forums turned the special space character into an asterisk.

Any help GREATLY appreciated! Thanks.

08-12-2010, 05:08 AM
Look at this article. There are eight examples of how this guy uses defined lists styled to get some stuff done. Maybe that would work out better for you.

I think example 7 in the article looks close to the way your post describes.


I used that article as a reference today for something else, and the technique validated as HTML 4 strict. I'm confident it's workable. Good luck.