CODEWITHSUNDEEP
htmlcss
Prakhar Thakur
Prakhar Thakur

Reputation: 1229

div-width depends on width of sibling

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>

Upvotes: 4

Views: 3024

Answers (3)

GMchris
GMchris

Reputation: 5658

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.

Upvotes: 1

Maciej Kwas
Maciej Kwas

Reputation: 6459

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><a href="#">item one</a></li>
  <li><a href="#">item 2</a></li>
  <li><a href="#">item three</a></li>
  <li><a href="#">item 4</a></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;
}

Upvotes: 3

Hidden Hobbes
Hidden Hobbes

Reputation: 14183

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>

Upvotes: 5

Related Questions