Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    Regular Coder
    Join Date
    Jan 2010
    Posts
    101
    Thanks
    17
    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.

    Code:
    .title-bar {height:4px;width:100%;}
    Code:
    <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>
    Note, the forums turned the special space character into an asterisk.

    Any help GREATLY appreciated! Thanks.

  • #2
    New Coder
    Join Date
    Jul 2010
    Posts
    24
    Thanks
    0
    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.

    http://www.maxdesign.com.au/articles/definition/

    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?


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •