twcp 0

I have a list in which most lines have only one list item which displays as a block, each within its own div tag. Because of the display:block, only one item can appear on each line, but sometimes I need to display two items side-by-side. If I get rid of the display:block, however, the surrounding, colors, borders, etc. shrink to the size of the text, which takes away that "menu" look.

You can see my sample code here. The black borders are added for emphasis to show where the two elements are now. I want each element to take up exactly half of the line, and each word to be centered within that half. All borders, margins, padding, etc. should apply to each of the side-by-side elements (not just to the line as a whole).

I don't know how wide the menu is, so I cannot use fixed widths. The menu is being generated by a java servlet, and can be wider or narrower, depending on where it is displayed. The point is that I need the side-by-side elements to be 50% the size of the single elements. How can I do this without fixed widths?

1 answer

Jordan 469
1
point
This was chosen as the best answer

You should try using a table to accomplish this rather than using a div, that will make it easier to place to elements side by side. So do something like this:

<table width="300" style="padding: 1px 7px; border: 2px solid #FFECF5;">
  <tr>
    <td colspan="2">Link1</td>
  </tr>
  <tr>
    <td colspan="2">Link2</td>
  </tr>
  <tr>
    <td colspan="2">Link3</td>
  </tr>
  <tr>
    <td><div class="half">Link4a</div></td>
    <td><div class="half">Link4b</div></td>
  </tr>
</table>

You can then place your <div> inside the <td> tag, to keep the style you have already set up, or you can style the <td> tags with the two links using inline styles. For example:

<td style="padding: 0px 7px;
border:2px solid black;" align="center">

Hope this helps.

Answered about 9 years ago by Jordan
  • Thanks, this is exactly what I needed. I actually <i>was</i> using a table originally, but I don't know why it never occurred to me to use colspans to accomplish this. How embarrassing :). But thanks a lot for your help twcp about 9 years ago
  • You are very welcome! Glad to help. :) Jordan about 9 years ago