1

Possible Duplicate:
Fluid width with equally spaced DIVs

I am trying to put footer elements which are texts. I was trying to have equal distance between texts elements.

<nav>
  <ul>
    <li><a>Item Reg</a></li>
    <li><a>Item Sm</a></li>
    <li><a>Item Very Long</a></li>
    <li><a>Item Reg</a></li>
  </ul>
</nav>

Here is an image explaining the scenario I want to implement. Left and right elements are always aligned to left and right respectively. Expected Footer Element Behaviour

How can I do it with css and html. NOTE: CSS3 is allowed.

Community
  • 1
  • 1
Hossain Khan
  • 6,332
  • 7
  • 41
  • 55
  • Actually i found similar issue answered http://stackoverflow.com/questions/8724665/flexible-horizontal-navigation-with-equal-distance-between-nav-elements and http://stackoverflow.com/questions/6865194/fluid-width-with-equally-spaced-divs ... thanks for all the help. – Hossain Khan Jan 10 '12 at 14:06

4 Answers4

1

You ca use a padding-left for each <li> something like this:

    li{
position:relative;
float:left;
padding-left:20px;}
John the horn
  • 131
  • 16
1

One way would be to use percentage points for widths.

ul {
  width: 100%;
}
ul li {
  display: table-cell;
  width: 25%;
  text-align: center;
}
CNeo
  • 736
  • 1
  • 6
  • 10
0

You can achieve it in this way

<div class="footer">

    <div style="width:200px; float:left;">

        <ul style="list-style:none">
            <li>1</li>
            <li>2</li>
        </ul>

    </div>

    <div style="width:200px; float:left;">

        <ul style="list-style:none">
            <li>1</li>
            <li>2</li>
        </ul>

    </div>

    <div style="width:200px; float:left;">
        <ul style="list-style:none">
            <li>1</li>
            <li>2</li>
        </ul>

    </div>

    <div style="clear:both"></div>

</div>
Bipin Chandra Tripathi
  • 2,550
  • 4
  • 28
  • 45
0

Assuming you have a fixed number of elements simply use :

ul{
    padding:0 20px 0 20px;
    width:100%;
}

li{
    display:inline;
    float:left;
    width:25%;
}

<ul>
    <li>One</li>
    <li>Two</li>
</ul>
detheridge02
  • 640
  • 1
  • 6
  • 18