SitePoint Sponsor

User Tag List

Results 1 to 9 of 9

Hybrid View

  1. #1
    SitePoint Evangelist
    Join Date
    Jan 2002
    Posts
    457
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Alignment of lists without tables?

    I have two definition lists that need to be side by side. I put them in a table, and that works okay, but if the number of entries in the two lists is not the same, the one that is shortest will have it's bottom entry aligned with the bottom entry of the longest list, and there will be some extra spave at the top of the shorter list.

    Is there anyway I can align these side-by-side without tables?

  2. #2
    gingham dress, army boots... silver trophy redux's Avatar
    Join Date
    Apr 2002
    Location
    Salford / Manchester / UK
    Posts
    4,838
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    not knowing your exact situation, i would say that maybe it's a case of looking at why the two lists need to be aligned with each other, and possibly opting for a different structure in you xhtml that semantically conveys the relationship between the list items of the two lists, rather than attempting to convey the relationship "visually" through positioning...
    re·dux (adj.): brought back; returned. used postpositively
    [latin : re-, re- + dux, leader; see duke.]
    WaSP Accessibility Task Force Member
    splintered.co.uk | photographia.co.uk | redux.deviantart.com

  3. #3
    SitePoint Wizard DougBTX's Avatar
    Join Date
    Nov 2001
    Location
    Bath, UK
    Posts
    2,498
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Joshua Clinard
    Is there anyway I can align these side-by-side without tables?
    Redux is probably right, though it may help you to look at the multitude of column layouts all over the net. Try this one for example:

    http://www.sorehead.org/css/css_cols.html

    Set the width to 50% (or less, you try) and you should get the effect you sound like you are after.

    Good luck,
    Douglas
    Hello World

  4. #4
    SitePoint Evangelist
    Join Date
    Jan 2002
    Posts
    457
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for the help! This is actually for a list of baby names. Girls names on the left, boys names on the right. Although I will probably use this in a few other places as well, since it works so well.

    What is the reccomended way to do this? I tried it using a div id, and that worked. It also worked using a class. Here is the code I used.

    #float { float: left; width: 250px }
    .clear { clear: both }

    .float { float: left; width: 250px }

    I did not quite understand why .clear is needed. It works in my browser without it.

    I also have another question. What is the difference between a class and an ID?

  5. #5
    gingham dress, army boots... silver trophy redux's Avatar
    Join Date
    Apr 2002
    Location
    Salford / Manchester / UK
    Posts
    4,838
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    ID = use only once (a unique element, e.g. a site header)
    class = apply multiple times
    re·dux (adj.): brought back; returned. used postpositively
    [latin : re-, re- + dux, leader; see duke.]
    WaSP Accessibility Task Force Member
    splintered.co.uk | photographia.co.uk | redux.deviantart.com

  6. #6
    SitePoint Evangelist
    Join Date
    Jan 2002
    Posts
    457
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Can you expand a bit on that? I don't understand what the benefit would be to using an ID would be if you could just create a different class.

  7. #7
    gingham dress, army boots... silver trophy redux's Avatar
    Join Date
    Apr 2002
    Location
    Salford / Manchester / UK
    Posts
    4,838
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    it's a question of semantics, of the logic behind your code. a unique element that is important in your page should have an ID assigned to it. to assign styles to this element now, it doesn't make sense to assign it a class as well.

    so, no real technical reason, but more of a reason of "proper semantics"
    re·dux (adj.): brought back; returned. used postpositively
    [latin : re-, re- + dux, leader; see duke.]
    WaSP Accessibility Task Force Member
    splintered.co.uk | photographia.co.uk | redux.deviantart.com

  8. #8
    SitePoint Addict
    Join Date
    Jul 2001
    Posts
    284
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    going on your original question, would it help to put VALIGN="top" into your TD tags?

  9. #9
    SitePoint Evangelist
    Join Date
    Jan 2002
    Posts
    457
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by htmlite
    going on your original question, would it help to put VALIGN="top" into your TD tags?
    I never really understood the valign property. I always used left, right and center. I would also much rather use CSS than tables as well. Since it's working, that's what I'll do.


Bookmarks

Posting Permissions

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