CODEWITHSUNDEEP
htmlcss
Kango
Kango

Reputation: 847

float and width css

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     [email protected]     1233
2  pqregd  trhrgh     [email protected]    7899
3  ytrey   [email protected]    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%).

Upvotes: 1

Views: 125

Answers (5)

Leo T Abraham
Leo T Abraham

Reputation: 2437

.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.

Upvotes: 2

Ashis Kumar
Ashis Kumar

Reputation: 6544

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/

Upvotes: 2

Swarnamayee Mallia
Swarnamayee Mallia

Reputation: 2008

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">[email protected]</div>
    <div class="list">1233</div>
  </li>
  <li>
    <div class="list">pqregd</div>
    <div class="list">trhrgh</div>
    <div class="list">[email protected]</div>
    <div class="list">7899</div>
  </li>
  <li>
    <div class="list">ytrey</div>
    <div class="list"></div>
    <div class="list">[email protected]</div>
    <div class="list">7899</div>
  </li>
</ul>

Upvotes: 0

DevlshOne
DevlshOne

Reputation: 8457

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!

Upvotes: 4

Dipesh Parmar
Dipesh Parmar

Reputation: 27354

Working DEMO

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

Upvotes: 0

Related Questions