Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
08-11-2010, 10:38 AM #1
- Join Date
- Jan 2010
- Thanked 5 Times in 5 Posts
Need CSS to perform table behavior
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"> <tr> <td style="padding-right:10px;"><div class="title">The*Text</div></td> <td width="100%"><div class="title-bar green"></div></td> </tr> </table>
Any help GREATLY appreciated! Thanks.
08-12-2010, 05:08 AM #2
- Join Date
- Jul 2010
- Thanked 2 Times in 2 Posts
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.
You are familiar with computers, right?