Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Set width of element to width of sibling

Tags:

html

css

width

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>
like image 386
Matt Dunn Avatar asked Jan 20 '16 11:01

Matt Dunn


People also ask

What does .CSS width and width () change the width of?

The width CSS property sets an element's width. By default, it sets the width of the content area, but if box-sizing is set to border-box , it sets the width of the border area.

How do I set the width of a div to its content?

Using inline-block property: Use display: inline-block property to set a div size according to its content.

Is used to set the width size of an element?

The CSS height and width properties are used to set the height and width of an element. The CSS max-width property is used to set the maximum width of an element.

Is width inherited in CSS?

width:inherit inherits width that defined by parent. This makes child width 25%, but if I redefine it with width:100% it will define width of child 50%.


1 Answers

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/

like image 130
jcaron Avatar answered Oct 25 '22 22:10

jcaron