0

I am having extreme difficulty trying to make a child div extend to the full width of the window, and not just the width of the parent.

I am using Angularjs with UI-Router, don't know if that is contributing to the problem.

Here is a screen shot. I would like the image to stretch to the full width of the window.

enter image description here

Daniel Gaeta
  • 774
  • 2
  • 9
  • 22

2 Answers2

1

Seems like this is a question specific to using UI-Router in Angular.

I had the following in my index.html 

<!-- MAIN CONTENT -->
<div class="container">

<!-- THIS IS WHERE WE WILL INJECT OUR CONTENT  ============================== -->
<div ui-view></div>

</div>

The outer container div was restricting the content in the ui-view div from stretching to the full width of the window.

Thus, the problem was solved by removing the container div.

Daniel Gaeta
  • 774
  • 2
  • 9
  • 22
0

Try position: absolute on a child

Pavel Lint
  • 3,252
  • 1
  • 18
  • 18
  • When I try `position: absolute;` it messes up the hierarchical flow of divs that come after the child image. It's not letting me post a screen shot, but what happens is an image below it now is shown overlapping the child div. – Daniel Gaeta Aug 19 '15 at 04:51
  • There's also this approach: `.child-element { position: relative; width: 100vw; left: calc(-50vw + 50%); }` http://stackoverflow.com/questions/5581034/is-there-are-way-to-make-a-child-divs-width-wider-than-the-parent-div-using-css – Pavel Lint Aug 19 '15 at 04:54