CODEWITHSUNDEEP
htmlcss
jhamm
jhamm

Reputation: 25032

How to line up lists side by side?

I am making a calendar and I have multiple lists that I want to place side-by-side. I have a div and inside that div there are multiple lists. Here is the html:

<div class="weekly-view">
    <ul class="hours">
        <li>
            <div class="appt">1</div>
            <div class="appt">1</div>
            <div class="appt">1</div>
        </li>
        <li>
            <div class="appt">2</div>
            <div class="appt">2</div>
            <div class="appt">2</div>
        </li>
        ....
    </ul>
    <ul class="hours">
        <li>
            <div class="appt">3</div>
            <div class="appt">3</div>
            <div class="appt">3</div>
        </li>
        <li>
            <div class="appt">4</div>
            <div class="appt">4</div>
            <div class="appt">4</div>
        </li>
        ....
    </ul>
</div>

And here is the css:

.weekly-view {
  clear: both;
  list-style: none;
}
.weekly-view .hours {
  list-style: none;
  margin: 0;
  padding: 0;
}
.weekly-view .hours li {
  width: 13.857142857%;
}

I am using webkit and keep getting a huge margin on the right side. I can't figure it out where it is coming from. How would I place these lists side by side?

Upvotes: 1

Views: 75

Answers (2)

morha13
morha13

Reputation: 1937

your css file should be this:

.weekly-view {
  clear: both;
  list-style: none;
}
.weekly-view .hours {
  list-style: none;
  margin: 0;
  padding: 0;
}
.weekly-view .hours li {
  width: 13.857142857%;
}
.hours {
    float: left;
}

Upvotes: 1

Alex
Alex

Reputation: 6037

<div class="weekly-view">
  <div class="hours">
    <ul >
        <li>
            <div class="appt">1</div>
            <div class="appt">1</div>
            <div class="appt">1</div>
        </li>
        <li>
            <div class="appt">2</div>
            <div class="appt">2</div>
            <div class="appt">2</div>
        </li>
        ....
    </ul>
  </div> 
  <div class="hours">
    <ul >
        <li>
            <div class="appt">3</div>
            <div class="appt">3</div>
            <div class="appt">3</div>
        </li>
        <li>
            <div class="appt">4</div>
            <div class="appt">4</div>
            <div class="appt">4</div>
        </li>
        ....
    </ul>
  </div>
</div>

css

   .hours{
        float: left;
        margin: 0 20px 0 0;
    }
ul, li{
margin:0;
padding:0 0 0 15px;    
}

Upvotes: 0

Related Questions