Set Div to Have Its Siblings Width

Set width of element to width of sibling

A quick way to solve this would be to simply use some jQuery. It would only take two lines of code to achieve this.

var imgWidth = $('.image').width();
$('.content').width(imgWidth);

Is it possible to set the width of siblings elements based from the longest element in css

Important Notice: the solution below is a hack.

The idea here is to rely on direction column and inline-flex to have all element equal width (the longest one) then I use transformation in order to revert back the row direction.

^{I know it's a bad hack}

.link {  height: 49px;  padding: 0 24px;  background: pink;  border:1px solid;} 
.container {  padding: 30px;  display: inline-flex;  flex-wrap:wrap;  flex-direction:column;}.link:nth-child(2) {  transform:translate(100%,-100%);}.link:nth-child(3) {  transform:translate(200%,-200%);}.link:nth-child(4) {  transform:translate(300%,-200%);}

<div class="container">  <div class="link">    <a href=""><span> 1 button</span></a>      </div>  <div class="link">    <a href=""><span> secondary button</span></a>      </div></div><br><div class="container">  <div class="link">    <a href=""><span> 1 button</span></a>      </div>  <div class="link">    <a href=""><span> secondary button</span></a>      </div>  <div class="link">    <a href=""><span> third button</span></a>      </div></div><br><div class="container">  <div class="link">    <a href=""><span> 1 button</span></a>      </div>  <div class="link">    <a href=""><span> 2 button</span></a>      </div></div>

div-width depends on width of sibling

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>

Make sibling div follow width of its sibling img

It's unclear if you want the buttons to expand to each fill half of the width of the image above them. That was my take, though, so here is an example showing the buttons filling space at different image widths:

.content {
  display: inline-flex;
  flex-direction: column;
}

.buttons {
  display: flex;
}

.buttons>button {
  flex: 1;
}

<div class='content'>
  <img src='http://placekitten.com/400/200' class='nft'>
  <div class='buttons'>
    <button class='buy'>Buy</button>
    <button class='share'>Share</button>
  </div>
</div>

<div class='content'>
  <img src='http://placekitten.com/200/200' class='nft'>
  <div class='buttons'>
    <button class='buy'>Buy</button>
    <button class='share'>Share</button>
  </div>
</div>

Element adjust width according to parent and siblings

This can be implemented by flex layout. Here is the code snippet for your case:

#parent {  display: flex;  flex-direction: row;}#child1 {  flex-basis: 20%;}#child2 {  flex: 1;}#child3 {  display: none;}

<div id="parent" style="background-color: pink;">    <div id="child1" style="background-color: gray;">        div1    </div>
    <div id="child2" style="background-color: blue;">        div2    </div>
    <div id="child3" style="background-color: violet;">        div3    </div></div>

Making sibling elements take the same width breaks the text in them

If I'm not totally mistaken here, the only way to make that work cross browsers using CSS is to combine display: inline-block with display: table-row/display: table-caption.

Stack snippet

.panel {  margin-bottom: 20px;  display: inline-block;  box-shadow: 0 2px 4px 0 #C6C2BF;  padding: 0.5rem 1rem 1rem;}
.user-title {  display: table-row;}
.panel > div {  display: table-caption;  caption-side: bottom;}

<div class="panel">    <p class="user-title">Date 08.03.2018 User: Joe Doe</p>    <div>      <p>Some long text in the paragraph that is wider than the title above it</p>      <p>Another shorter text</p>    </div></div>

---

Related Topics