/    Sign up×
Community /Pin to ProfileBookmark

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

Copy linkTweet thisAlerts:
Oct 23.2013

Here is an example of what I mean: [URL=”http://wgdes.com/sandbox/template/assets/img/wframe/wframe_nht.jpg”]IMAGE[/URL]

The photo at the top is full-width as are the little “bars” that stick out the sides of the content, but they all [I]have to[/I] 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?

Thanks in advance for any help or advice.

to post a comment
CSS

2 Comments(s) ↴

Copy linkTweet thisAlerts:
@ss1289Oct 23.2013 — I think there are a few ways you can do it.

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.
Copy linkTweet thisAlerts:
@priyankagoundOct 24.2013 — I have done this in one of my application.

Below is the example code and it has worked fine for me:

<div class="stripeContainer">

<div class="container">

<div class="span-8">Column 1</div>

<div class="span-8">Column 2</div>

<div class="span-8 last">Column 3</div>

</div>

</div>

<div class="container">

<div class="span-12">Body goes here</div>

<div class="span-12 last">Some sort of menu perhaps</div>

</div>

Then you style .stripeContainer:

.stripeContainer

{

width: 100%; /* this is usually implied */

background-color: pink;

}

For stripe you can follow up with the below link:

http://css-tricks.com/uniqlo-stripe-hovers/

Hope this helps.
×

Success!

Help @amandaNHT spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 6.17,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @nearjob,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,
)...