Force Child %100 Width Outside Parent DIV Metro Pro

[ScottFromPA]

What's up guys,

My goal is to have a 100% DIV that stretches to the edge of the browser. I'm going to place a slideshow inside this div. I'm using Metro Pro and I've created a new widget in the genesis_before_content action hook.

How can I make this new widget full width outside the parent div?

Here's my beta.

The feed back I'm getting from stackoverflow.com is that a css approach is not compliant.

http://www.gridviper.com/linguistics/

[Tony @ AlphaBlossom]

Do you just want it to extend to the edge of the site-container? If so, you can do something like this:

.new-widget {
  padding: 0 50px;
  margin: 0 -50px;
  background-color: gray;
}

You can use larger numbers if you need to (responsive adjustments, etc).

Not sure why it wouldn't be compliant, but I may be missing something there. If you're worried about that, you can use genesis_after_header, with a priority that comes after the nav and position it before/outside of the .site-inner div.

Hope that helps!

---

Tony Eppright | http://www.AlphaBlossom.com | Follow me on twitter @_alphablossom

[ScottFromPA]

Hmm.... I tried negative margins / padding and it did not work. Check it out, here's what I'm trying to accomplish.

http://www.gridviper.com/linguistics/0-wide-outside-parent-div/

[ScottFromPA]

Got it!

The solution is to define the position as absolute.

Below is what works.

.new-widget { 
          width:100%; /* defines full width */
          position:absolute; /* bounces the div outside of the parent */
       }

The only downside is that it does not push the other DIVs down. It's rides on top of them because of the absolute declaration. It's no biggie I can account for that.

[Author]

Posts