CODEWITHSUNDEEP
jquerycsstwitter-bootstrap
Fra Ore
Fra Ore

Reputation: 15

Full screen DIV inside a fix width DIV

I read some questions like this but nothing can help me...

I have a bootstrap layout with fix (centered width margin: 0 auto) container width at 1170px.

Now in this content I need insert a div that respects the order of the divs (so no position: absolute), but has width 100%. In this way I can use this div to insert a banner with background-size: cover;

I read this Div with 100% width of screen, but inside a parent div with fixed width this solution doesn't permit me to use a unique background image for the entere div..

I thing I can resolve it using a jquery that adds a negative margin-left and margin-right in base the distance between the centered div and the screen...

Can you help me ? ;)

Thanks

Upvotes: 0

Views: 668

Answers (1)

Paulie_D
Paulie_D

Reputation: 115096

You are overthinking things.

You have a container div with a fixed width of 1170px..perhaps with a class of .container (not sure of Bootstrap). That doesn't mean you can't use the container class more than once.

So, just close the fixed width container before your full width div and reopen the container after it. Simple really.

<div class="container">

</div>

<div>
YOUR BANNER HERE
</div>

<div class="container">

</div>

Upvotes: 4

Related Questions