Best way to: background "stripe" at 100% wide while inner div is content-width?

If this is your first visit, be sure to
check out the FAQ by clicking the
link above. You may have to register
before you can post: click the register link above to proceed. To start viewing messages,
select the forum that you want to visit from the selection below.

Best way to: background "stripe" at 100% wide while inner div is content-width?

The photo at the top is full-width as are the little "bars" that stick out the sides of the content, but they all have to line up with the content they are paired with... in the case of the first blue bar (at the top edge of the main photo) the general concept is fairly simple, like a full-width div with a content-width div inside of it, but some of the other ones are kind of confusing, like the ones that outline the "previous" and "next" arrow buttons on the carousels.

Is there a "best practice" for making these kind of bars work and position properly?

You can use "position: absolute" to hover the boxes over the bars. While also using to "top, bottom, left, right" attributes in css.
You can also use a negative margin to shift a div on top of another div.
You could make the bar a background image. Although you want to try to limit the amount of images you load, which is why it's better to use css instead if it's a flat colored bar.