Question

I am using jquery ui tabs, which requires the tabs to be <li> elements, by default at least.

I only need 2 tabs, but I am not able to size them so that they are both equal and take up 100% of available width of the ul.

here is my code.

<div id="intro_tabs" class="tabs">
    <ul id="intro_nav">
      <li>
        <h3><a href ="#tabs-1" class="null_link"><%= t('home.index.what_is_it') %></a></h3>
      </li>
      <li>
        <h3><a href ="#tabs-2" class="null_link"><%= t('home.index.how_works') %></a></h3>
      </li>
    </ul>
    <div id="tabs-1">
      <%= simple_format t 'home.index.what_intro_details' %>
    </div>
    <div id="tabs-2">
      <div id="intro_accordion">
        <h3><a href="#">Users</a></h3>
        <div>
          <%= t 'home.index.how_intro_details_user' %>
        </div>
        <h3><a href="#">Merchants</a></h3>
        <div>
          <%= t 'home.index.how_intro_details_merchant' %>
        </div>

      </div>
    </div>
  </div>

I have tried using css property width:50%, on both li’s but it doesn’t work.

Thanks

Answer 1

To do what you’re asking for, you’d need to make sure that both list-items fit in your ul. If you want them to take up all the space and have a padding or margin, you cannot use 50% and an em value for the padding b/c you’d always end up > 100% and get your items spread over two lines.
In the case where you want to have right margin, use 1% as right margin and make the width 49%, this way you use 100% of the space and don’t wrap to the next line. The CSS for this would be sth along the lines of

#intro_nav li {
    width:49%;
    padding: 0;
    margin: 0 1% 0 0;
    list-style-type: none;
    float: left;
    display: inline-block;
}

Don’t forget to clear the float in the following element. If you need more margin/ padding/ border, use a percent-based value and substract it from the width to still make the elements fit. If you have a margin of one percent on each side, you need to substract 2% from the width. hth.