CODEWITHSUNDEEP
htmlcsshtml-lists
Kassym Dorsel
Kassym Dorsel

Reputation: 4843

li element pushed down when siblings have different number of text lines

I'm trying to make a simple schedule.

It works fine until the content of the list elements span a different number of lines. If all siblings within a list have the same number of text lines they display properly otherwise some are pushed down.

CSS :

ul {
  display: table;
  width: 100%;
  list-style-type: none;
  margin: 0;
  padding: 0;
  text-align: center;
}
.timetable {
  width: 600px;
  float: right;
  border-left: 2px solid #999;
  border-right: 2px solid #999;
}
.timetable li {
  border-bottom: 2px solid #999;
}
.date {
  text-align: center;
  line-height: 30px;
}
.multievent li {
  display: inline-block;
  width: 110px;
  border: none;
  border-right: 2px solid #999;
}

HTML:

  <ul class="timetable day2">
    <li>
      <ul class="multievent">
        <li class='suite1 firstchild' style="height: 28px;">one line</li>
        <li class='suite2' style="height: 28px;">one line</li>
        <li class='suite3' style="height: 28px;">one line</li>
        <li class="suite4" style="height: 28px;">one line</li>
      </ul>
    </li>
    <li>
      <ul class="multievent">
        <li class='suite1' style="height: 58px;">two line  asdasdf two line</li>
        <li class='suite2' style="height: 58px;">two line  asdfasdftwo line</li>
        <li class='suite3' style="height: 58px;">one line</li>
        <li class="suite4" style="height: 58px;">two line asdfasdf two line</li>
        <li class="ball noborder" style="height: 58px;">two line asdfasdf two line</li>
      </ul>
    </li>
    <li>
      <ul class="multievent">
        <li class='suite1' style="height: 58px;">two line  asdasdf two line</li>
        <li class='suite2' style="height: 58px;">three line  asdfasdasdff three line</li>
        <li class='suite3' style="height: 58px;">two line  asdfasdftwo line</li>
        <li class="suite4" style="height: 58px;">two line asdfasdf two line</li>
        <li class="ball noborder" style="height: 58px;">two line asdfasdf two line</li>
      </ul>
    </li>
    <li>
      <ul class="multievent">
        <li class='suite1' style="height: 58px;">two line  asdasdf two line</li>
        <li class='suite2' style="height: 58px;">two line  asdff two line</li>
        <li class='suite3' style="height: 58px;">two line  asdfasdftwo line</li>
        <li class="suite4" style="height: 58px;">two line asdfasdf two line</li>
        <li class="ball noborder" style="height: 58px;">two line asdfasdf two line</li>
      </ul>
    </li>
    </ul>

For example look here : http://jsfiddle.net/762LA/1/

You will see when all boxes line up properly the contents span the same number of lines.

What is happening ? Is there an easy fix or should I do this another way completely.

Upvotes: 1

Views: 790

Answers (1)

Jack
Jack

Reputation: 9538

Give your list items a top vertical alignment:

li { vertical-align:top; }

Upvotes: 6

Related Questions