div-width depends on width of sibling

Question

Following is a menu that I am trying to create.

I want menu item divs to be independent in width, and have a width only as much is required for the text inside which i thought was default behavior. Where did I go wrong?

.patleLast {
  padding: 10px;
  border-radius: 1000px 0px 1000px 1000px;
  background-color: black;
  width: auto;
  margin: 1px;
}

.patleFirst {
  padding: 10px;
  border-radius: 1000px 1000px 0px 1000px;
  background-color: black;
  margin: 1px;
}

.patle {
  padding: 10px;
  border-radius: 1000px 0px 0px 1000px;
  background-color: black;
}

.topPan {
  position: fixed;
  top: 10px;
  right: 0px;
  color:white;
  font-family: 'Raleway', sans-serif;
  z-index: 1000;
  text-align: right;
}

<div class="topPan">
  <div class="patleFirst">
    Book Tickets
  </div>
  <div class="patle">
    Screening Schedule
  </div>
  <div class="patleLast">
    Book Tickets
  </div>
</div>

Answer 1

This is expected behaviour. The default display for divs is block which will always take up the full width.

To achieve the behaviour you are after make the following changes to CSS:

• Add float: right; to .patleLast, .patleFirst, .patle - this will shrink the divs to fit its content
• Add clear: both; to .patleLast, .patleFirst, .patle - this will ensure they wrap onto new lines

By floating the div the width is computed as "shrink to fit".

If 'width' is computed as 'auto', the used value is the "shrink-to-fit" width.

Floating, non-replaced elements (https://www.w3.org/TR/CSS2/visudet.html#float-width)

.patleLast {
  padding: 10px;
  border-radius: 1000px 0px 1000px 1000px;
  background-color: black;
  width: auto;
  margin: 1px;
}

.patleFirst {
  padding: 10px;
  border-radius: 1000px 1000px 0px 1000px;
  background-color: black;
  margin: 1px;
}

.patle {
  padding: 10px;
  border-radius: 1000px 0px 0px 1000px;
  background-color: black;
}

.patleLast, .patleFirst , .patle {
  clear: both;
  float: right;
}

.topPan {
  position: fixed;
  top: 10px;
  right: 0px;
  color:white;
  font-family: 'Raleway', sans-serif;
  z-index: 1000;
  text-align: right;
}

<div class="topPan">
  <div class="patleFirst">
    Book Tickets
  </div>
  <div class="patle">
    Screening Schedule
  </div>
  <div class="patleLast">
    Book Tickets
  </div>
</div>