float and width css

Question

i am new with css, Here i am working with some css ,

I have html like ,

<ul>
 <li>
    <div class="list">Name</div>
    <div class="list">Address</div>
    <div class="list">Email</div>
    <div class="list">Ph</div>
  </li>
</ul>

css code,

li {
  width:100%;
}

.list{
  width:25%;
  float:left;
}

output like,

   Name    Address    Email             Ph
1  abcd    abdvdh     ads@gmail.com     1233
2  pqregd  trhrgh     pqrs@gmail.com    7899
3  ytrey   xyz@gmail.com    7899

The problem occurs in 3rd row when Address field value not available(blank) for row Email and Ph are moves to left.

what should i do for if any value is empty its occupy its width(25%).

Answer 1

You've probably read somewhere that tables are evil . Well, for page formatting and layouts, it's true that CSS is the preferred method. However, what you have here is a table full of data and no matter what you've been told, using <table> is still the best and a perfectly acceptable manner to display the output. Don't be afraid to use tables when they are still the correct tags for the job!

Answer 2

.list{
  width:25%;
  float:left;
  min-height: 1px;
}

Use this style. No need for data here. There was no height assigned to the div list. That is why it happened. min-height should be a value above 0.

Answer 3

You need to set the min-height to the list class.

.list{
  width:25%;
  float:left;
  min-height: 10px; // Set the value as per your need, but not zero
}

Check this http://jsfiddle.net/2XeMX/

Answer 4

Working DEMO

All you need to do is set   when the data is empty. see the example i shared you will have better idea.

Answer 5

Here is the fiddle link

CSS

*{padding:0;margin:0;}
li {
  width:100%;
  display: table;
}

.list{
  width:25%;
 /* float:left;*/
  display: table-cell;
}

HTML

<ul>
 <li>
    <div class="list">Name</div>
    <div class="list">Address</div>
    <div class="list">Email</div>
    <div class="list">Ph</div>
  </li>
  <li>
    <div class="list">abcd</div>
    <div class="list">abdvdh</div>
    <div class="list">ads@gmail.com</div>
    <div class="list">1233</div>
  </li>
  <li>
    <div class="list">pqregd</div>
    <div class="list">trhrgh</div>
    <div class="list">pqrs@gmail.com</div>
    <div class="list">7899</div>
  </li>
  <li>
    <div class="list">ytrey</div>
    <div class="list"></div>
    <div class="list">xyz@gmail.com</div>
    <div class="list">7899</div>
  </li>
</ul>