CODEWITHSUNDEEP
htmlcss
user1278456
user1278456

Reputation: 721

Set div to have its siblings width

I'm looking for a CSS solution to the following:-

<div style="display:inline;">
     <div>The content of this div is dynamically created but will always be wider than
              the below div. 
     </div>
     <div> Need this div to have the same width as the above div.
     </div>
</div>

The wrapper div has an inline display and works as expected, both child divs have dynamically generated content. I need the bottom one to take the width of the previous sibling.

Many thanks for any suggestions in advance.

Upvotes: 72

Views: 70316

Answers (9)

maxshuty
maxshuty

Reputation: 10730

Modern simple solution...

Use grid and the fr unit. Then you can split up into as many equally sized rows or columns as you want:

.container {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-column-gap: 1em;
}

.container > div {
  border: 1px solid black;
  padding: 0.5em;
}
<div class="container">
  <div>I'm a part of a grid. I will be split up into equal parts with my other sibling(s) depending on how many columns the grid is given.</div>
  <div>I am a sibling element.</div>
</div>

Upvotes: 8

Peter Josling
Peter Josling

Reputation: 1126

Here's another Flexbox solution which allows for the second child to wrap to match the width of the variable height sibling.

.wrapper > div {
  border: 1px solid;
}

.child {
  display: flex;
}

.child div {
  flex-grow: 1;
  width: 0;
}

.wrapper {
  display: inline-block;
}
<div class="wrapper">
    <div>This div is dynamically sized based on its content</div>
    <div class="child"><div>This div will always be the same width as the preceding div, even if its content is longer (or shorter too).</div></div>
</div>

Upvotes: 95

danny
danny

Reputation: 31

you can try using { width: min-content; min-width: 100%;} on the second div and {display: inline-block} on the parent div

Upvotes: 1

Andreas Niebuhr
Andreas Niebuhr

Reputation: 1

If your willing to give up on a couple of <div>s then I have the solution for you:

<div style=“display: inline-block;”>
  <table>
    <tr>
      <td>The table automatically makes its siblings the same width</td>
    </tr>
    <tr>
      <td>So this will be as wide</td>
    </tr>
  </table>
</div>

Remember to set the div display:inline-block;

Upvotes: -3

keep
keep

Reputation: 63

Here is still a flexbox-based approach.

The essential idea: in an outermost wrapper, elements that need to be of equal width are wrapped into another wrapper.

.wrapper {
  display: inline-block;
}

.flex-wrapper {
  display: flex;
  flex-direction: column;
}

.demo-bar {
  height: 4px;
  background-color: deepskyblue;
}
<div class="wrapper">
  <div class="flex-wrapper">
    <div contenteditable>Some editable text.</div>
    <div class="demo-bar"></div>
  </div>
</div>

Another practical example: an adaptive progress bar with the same width below a media (video or audio) element.

video.addEventListener("timeupdate", () =>
  progress.style.width = `${video.currentTime / video.duration * 100}%`
)
.wrapper {
  display: flex;
  flex-direction: column;
  position: relative;
  align-items: center;
}

video {
  display: block;
  max-width: 100%;
}

.progress-bar {
  height: 0.25rem;
  background: #555;
}

#progress {
  width: 0%;
  height: 100%;
  background-color: #595;
}
<div class="wrapper">
  <div data-css-role="wrapper">
    <video id="video" controls>
      <source src="https://raw.githubusercontent.com/mdn/interactive-examples/master/live-examples/media/cc0-videos/flower.webm">
    </video>
    <div class="progress-bar">
      <div id="progress"></div>
    </div>
  </div>
</div>

Upvotes: 4

pilau
pilau

Reputation: 6733

Floats and tables are so 2000 and late. With today's browsers we can make the two sibling DIVs match each other's width, regardless which is bigger/smaller.

Here's a Flexbox solution fit for 2016:

.wrapper {
  display: inline-block;
}

.parent {
  display: flex;
  flex-direction: column;
}

/* For visualization */
.child {
  border: 1px solid #0EA2E8;
  margin: 2px;
  padding: 1px 5px;
}
<div class="wrapper">
  <div class="parent">
    <div class="child">Child number one</div>
    <div class="child">Child #2</div>
  </div>
</div>

Upvotes: 17

Chris
Chris

Reputation: 3846

UPDATE: This works with me, I've just tried it:

<div style="max-width:980px;border:1px solid red;">
   <div style="background:#EEE;float:left;">
     <div style="width:auto;border:1px solid blue;float:left;">If you use 100% here, it will fit to the width of the mother div automatically.</div>
     <div style="border:1px solid green;"> The div will be 100% of the mother div too.</div>
   </div>
     <div style="clear:both;"></div>
</div>

Is this what you want? The borders and background are just to show the divs ;)

Just go like this:

Let's say you want the whole divs be max. 980px (otherwise just leave that out or replace with 100%)...

<div style="max-width:980px;">
     <div style="width:100%;">If you use 100% here, it will fit to the width of the mother div automatically.
     </div>
     <div style="width:100%;"> The div will be 100% of the mother div too.
     </div>
</div>

The second option would be, to use one more div... or you use style="width:auto;" for the dynamic div...

Upvotes: 0

Andres I Perez
Andres I Perez

Reputation: 75409

Set your div to display:inline-block instead, this way your div will expand with the content inside of it.

http://jsfiddle.net/CpKDX/

Upvotes: 4

arraintxo
arraintxo

Reputation: 484

Not sure if I understood what you are trying to do, but looks like setting a 100% width to the last div should work:

<div style="width:100%;">

BTW the style in the first div is not well defined, you should use a colon instead of a equal sign in the properties definition:

<div style="display:inline;">

Upvotes: -3

Related Questions