tags:

views:

26

answers:

1

Hi, I have two rows of links like:

Link 1     Link 2     Link 3     Link 4
Link 5     Link 6     Link 7     LInk 8

I need the top four links to align with the top bottom links regardless of how many characters are in the link. For example,

This is link 1     This is link 2            Link 3     L4
LInk 1             Link 2 that is longer     Link 3     L4

I can do this with tables and td cells but how can this be accomplished just using divs?

Thanks.

+2  A: 
<ul id="links">
  <li><a href="#">Link 1</a></li>
  <li><a href="#">Link 2</a></li>
  <li><a href="#">Link 3</a></li>
  <li><a href="#">Link 4</a></li>
</ul>

CSS:

#links {
    list-style: none;
    padding: 0px;
    margin: 0px;
    overflow: hidden;
}

#links li {
    width: 25%;
    margin: 5px 0px;
    padding: 0px;
    float: left;
}
nlaq
This will work if he puts a link-list in each div and arranges the div's side by side.
rlb.usa
There is no need to use a div. Divs are dividers, not lists. ul's are better suited for this as they are more semantically correct (he has _list_ of links). The float: left, and width: 50%, will cause the behavior that he wants.
nlaq
OP should be aware that he should not add borders or padding with this solution.
Robusto