Half-width "wide box" - any hack ideas to make this work?

[WebRoyal]

I’m sure many of you know this current trend in web design, where there are two boxes next to each other - one of them is solid, and the other has a picture in it.

The missing element for me in sparkle is that each of these boxes is basically a “wide box” element, and they expand to fit the entire width of the page… HOWEVER, they only go to the center of the page and stop.

Is there any easy CSS rule I can add to my wide box to have it stop mid-page?

Example attached from a sample wordpress site.

Thanks all!

[duncan]

Don’t tell anyone…

[WebRoyal]

HAHAHAHA!!! Love you Duncan.

[WebRoyal]

@duncan - brilliant. Here’s my result using your tip. Thanks again!

[Hep15]

I’m a newbie and tried the trick but didn’t work for me.
Could you please explain the steps?
Cheers

[FlaminFig]

Hey @Hep15 welcome onboard!

So you can go about it this way…

• Place a Widebox on the canvas and fill it with an image of your choice.
• Now place a box on top of it and line the right side of the box where you want it and stretch the left hand side to maximum
• Now with the box selected go to your Style Panel and tick Border.
• Untick Same On All Sides
• Give the first 3 sides 0px
• The 4th side (left hand of the Box) select the colour you want and give the width 999px

This will expand the left side of the Box out to beyond the canvas…

[Hep15]

Works perfectly.

Thanks a lot for your help