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.
<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.