CODEWITHSUNDEEP
htmlcsswidth
Matt Dunn
Matt Dunn

Reputation: 5420

Set width of element to width of sibling

I have a slightly unusual CSS challenge to overcome.

I have a two column layout, whereby the width of the left column is set by the width of a main image, and the right allowed to fill the remaining space. There is a container under the main image, which could have a natural width greater than the main image. However, I want this div to be the same width as the main image, and the overflow to be hidden. Here is my effort at attempting this:

.outer {
  margin-right: 5px;
  position: relative;
}
.left {
  float: left;
}
.right {
  width: auto;
  overflow: hidden;
}
.contentOuter {
  overflow: hidden;
}
.content {
  width: 500px;
}
.inner {
  background-color: grey;
  color: white;
  width: 100%;
  height: 150px;
}
<div class="outer left">
  <div class="image">
    <img src="http://placehold.it/350x150" />
  </div>
  <div class="contentOuter">
    <div class="content">
      <img src="http://placehold.it/500x50" />
    </div>
  </div>
</div>
<div class="outer right">
  <div class="inner">
    Hello world!
  </div>
</div>

But as you can see, .contentOuter stretches to the width of its contents, regardless of what I attempt.

One major caveat I have is that apart from .content having a fixed width, I don't want any other hard-coded widths in my CSS; everything should be completely fluid, and the dimensions of the columns determined by the dimensions of the .image img.

So, I am after something that visually looks like this, but without the hard-coded max-width on .content:

.outer {
  margin-right: 5px;
  position: relative;
}
.left {
  float: left;
}
.right {
  width: auto;
  overflow: hidden;
}
.contentOuter {
  overflow: hidden;
}
.content {
  max-width: 350px; /* Hard-coded for demo purposes */
}
.inner {
  background-color: grey;
  color: white;
  width: 100%;
  height: 150px;
}
<div class="outer left">
  <div class="image">
    <img src="http://placehold.it/350x150" />
  </div>
  <div class="contentOuter">
    <div class="content">
      <img src="http://placehold.it/500x50" />
    </div>
  </div>
</div>
<div class="outer right">
  <div class="inner">
    Hello world!
  </div>
</div>

Upvotes: 8

Views: 7446

Answers (2)

Smithy
Smithy

Reputation: 791

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);

Upvotes: 0

jcaron
jcaron

Reputation: 17720

One option, though that depends on further requirements you may have, it so simply add to the lower block:

position: absolute;
width: 100%;

This takes it out of the flow, and the enclosing element will not take its width into account for sizing, only that of the image on top. The overflow: hidden will then hide whatever overflows.

The drawback is that the height of the enclosing element (or the position or subsequent elements) will not take into account the size of this element.

jsFiddle: https://jsfiddle.net/jacquesc/rsz0hb1g/

Upvotes: 3

Related Questions