div-width depends on width of sibling - html

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>

Answer 2

This is the proper behavior for block elements.
Besides that semantically more proper would be to use list element
https://jsfiddle.net/bkv9rzr2/
<ul>
<li>item one</li>
<li>item 2</li>
<li>item three</li>
<li>item 4</li>
</ul>
ul {
position: fixed;
top: 10px;
right: 0px;
font-family: 'Raleway', sans-serif;
z-index: 1000;
text-align: right;
}
a {
color:white;
}
ul li {
display:block;
margin:1px;
}
ul li a {
display:inline-block;
background:#000;
padding: 10px;
border-radius: 20px 0px 0px 20px;
transition:.2s;
}
ul li:first-child a {
border-radius: 20px 20px 0px 20px;
}
ul li:last-child a {
border-radius: 20px 0px 20px 20px;
}
ul li a:hover {
padding:10px 20px;
}

Answer 3

That's not typical div behavior. By default <div> elements have display: block, which will try to stretch them to the full width of the container. You're going to want to use display: inline-block or float: left. Both of these will make the divs take the size of their content, however they will also try to line the elements side by side, instead of make them fall under each other.
One workaround for this is to insert <br/> tags after each element. Or add :after pseudo-selectors which have display: block.