Search code examples
jqueryhtmlcsspaddingfluid-layout

Stretch element to full width of a padded fluid parent


I can't explain this well so I made a diagram. Yay!

sweet diagram bro

I have a parent that has a width of 95% and a padding of 30px. 99% of the elements inside this section will always be width 100% chilling out within the bounds of the padding.

BUT. I have one alternate use case in which an alert will pop up at the top of the section, that needs to stretch the WHOLE way across the page.

I could make an inner container that could hold most of the content but if theres a pretty no mess way where I could make that success banner have the width of 100% + padding and then offset it (I know I can position:relative that), then that seems like it would be the best solution.


Solution

  • Instead of width: 100%, try display: block and margin: 0 -30px; Example: http://jsfiddle.net/tx6av/1/ (sorry about the bad IDs)