1

Lets assume for some reason I can not change the HTML, neither use JavasScript. Lets assume the position of #content_actual depends on the height of #element. #element has a flexible height.

Is there a solution for this problem?

HTML:

<div id="content">
  <div id="element">ABCDE</div>
  <div id="content_actual">FGHIJ</div>
</div>

CSS:

#content {
  width:960px;
  margin: 0 auto;
}

#element {
// width: 100% of body width
// position: everything but position absolute or fixed
}
Igor Ivancha
  • 3,413
  • 4
  • 30
  • 39
Blackbam
  • 17,496
  • 26
  • 97
  • 150
  • Why the restriction on the position property? – j08691 Apr 22 '16 at 15:42
  • Because if the element is position:absolute or position:fixed then the element is completely removed from the document flow and therefore #content_actual will be below of it or can only be position using a fixed height (which i do not have) – Blackbam Apr 22 '16 at 15:44
  • What is the purpose of this 100% wide div? – Paulie_D Apr 22 '16 at 15:46
  • Showing a full width image which can be clicked away. Height of the image may change dynamically. – Blackbam Apr 22 '16 at 15:47
  • So the image is already in the HTML? – Paulie_D Apr 22 '16 at 15:48
  • As you mentioned, the document flow is important. But included in the document flow is the relationships the elements have. Without using position absolute or fixed, or using JS I don't really see a viable solution. – erwstout Apr 22 '16 at 15:48
  • Perhaps - http://stackoverflow.com/questions/28565976/css-how-to-overflow-from-div-to-full-width-of-screen – Paulie_D Apr 22 '16 at 15:50
  • @Paulie_D - Is that not a dupe? – BSMP Apr 22 '16 at 16:14
  • Not *exactly*, I don't think although I'd have to do a thorough review. I may add my answer below to the existing one. – Paulie_D Apr 22 '16 at 16:16

2 Answers2

2

Similar to Paulie_D's (apparently we were sharing brainwaves) but this uses percentage to counter the container width. No idea how well supported this would be:

https://jsfiddle.net/7w2cwqfq/4/

<div id="content">
  <div id="element">ABCDE</div>
  <div id="content_actual">FGHIJ</div>
</div>

#content {
width:200px;
margin: 0 auto;
background: yellow;
}

#element {
  position: relative;
  left: calc(-50vw + 50%);
  width: 100vw;
  background: red
}
Chris
  • 2,630
  • 3
  • 31
  • 58
1

A combination of relative positioning, viewport units and calc.

Codepen Demo

NOTE: this breaks as soon as the viewport is less than the container width. Media queries would be required at that point.

#content {
  width: 480px; /* numbers changed for this Snippet */
  margin: 0 auto;
  background: green;
  padding: 50px;
}
#element {
  height: 50px;
  line-height: 50px;
  width: 100vw;
  position: relative;
  right: calc(50vw - 240px); /* second value 50% of container width */
  background: lightblue;
}
<div id="content">
  <div id="element">ABCDE</div>
  <div id="content_actual">FGHIJ</div>
</div>

It should also be noted that the container cannot have overflow:hidden for this technique to work.

Paulie_D
  • 107,962
  • 13
  • 142
  • 161