CODEWITHSUNDEEP
htmlcsshtml-lists
user2232681
user2232681

Reputation: 833

How to float more than one <ul> inside a container?

I would like to have these unordered lists float side-by-side with each occupying 50% of the containing div, however I can only achieve that when the width of each ul is set to no more than 40%. This seems like a pretty simple styling situation, however I am new to this so I am probably missing something.

    <div class="middle">
      <ul id="filterbar">
        <li data-selection=1> Glucose Curve </li>
      </ul>
     <ul id="lookback">
       <li data-lookback=0> Today </li>
       <li data-lookback=999> Full History </li>
    </ul>
   </div>

CSS

.middle {
  width:50%;
  height:1500px;
}

ul {
  width:50%;
  height:100px;
  float:left;
  }

li {
  display:in-line;
  float:left;
  list-style:none;
  width:15%;

}

Upvotes: 1

Views: 182

Answers (2)

chopper
chopper

Reputation: 6709

Corrected Answer: Set the margins and padding of the <ul> element to zero. See the answer by @Adam below for details.

Upvotes: -1

Adam Jenkins
Adam Jenkins

Reputation: 55613

In addition to the width of 50%, your UL's also have margin's and padding associated with them by default.

There's a lot of ways that I could tell you how to do this, but because your new I'm assuming you'll eventually read all about box-sizing, the importance of zeroing margins, checking what your elements actually look like in developer tools, etc. and just tell you this is what you are missing:

ul {
  width:50%;
  height:100px;
  float:left; 
  margin:0; padding:0;
  }

Contrary to the answer by @chopper, which is completely wrong, a percentage width of an element will always be calculated as a percentage of it's immediate parent element.

Upvotes: 2

Related Questions