Escape the bounds of a div container

Asked 14/10, 2011 at 1:48 Answered 18/8, 2023 at 12:52

Alright, I understand that the purpose of a DIV is to contain its inner elements - I didn't want to upset anyone by saying otherwise. However, please consider the following scenario:

My web page (which only takes up a width of 70% of the entire page) is surrounded by a container (a div). However, under my navigation bar which is at the top of the page, I would like to create w banner that takes up 100% of the width of the entire page (which means it will have to extend outside the bounds of its container as the container is only taking up 70% of the page's width).

This is the basic idea that I am trying to accomplish: http://www.petersonassociates.biz/

Does anyone have any suggestions for how I could accomplish this? I'd appreciate any help.

Evan

Unhandled answered 14/10, 2011 at 1:48 Comment(2)

That particular site uses about the easiest way, which is an image: petersonassociates.biz/wp-content/themes/rapeterson/img/… – Polis 14/10, 2011 at 2:0

+1 for "I didn't want to upset anyone" – Thrift 14/10, 2011 at 3:18

If I understood correctly,

style="width: 100%; position:absolute;"

should achieve what you're going for.

Extremely answered 14/10, 2011 at 1:53 Comment(0)

If you just want the background of the element to extend across the whole page this can also be achieved with negative margins.

In a nutshell (correction from comment):

.bleed {
padding-left: 3000px;
margin-left: -3000px;
padding-right: 3000px;
margin-right: -3000px;
}

That gives you horizontal scroll bars which you remove with:

body {overflow-x: hidden; }

There is a guide at http://www.sitepoint.com/css-extend-full-width-bars/. It might be more semantic to do this with psuedo elements: http://css-tricks.com/full-browser-width-bars/

Letters answered 31/10, 2013 at 22:11 Comment(3)

Awesome! I used this solution (minus the overflow: hidden) on a Thrive Themes WordPress site to overcome some silly styles they preset and it worked like a charm. – Clive 3/2, 2016 at 15:23

This should be the accepted answer, as the position: absolute; fix removes the element from the flow's body, which requires extra markup on other elements to ensure that said elements aren't overlapped by the full-width code. – Thereupon 20/2, 2016 at 5:5

Is there any negative consequence to setting the overflow-x to hidden on the body? Mobile, or something? – Cronyism 10/5, 2017 at 20:11

EDIT (2019): There is a new trick to get a full bleed using this CSS utility:

width: 100vw;
margin-left: 50%;
transform: translateX(-50%);

I guess all solutions are kind of outdated.

The easiest way to escape the bounds of an element is by adding:

    margin-left: calc(~"-50vw + 50%");
    margin-right: calc(~"-50vw + 50%");

discussion can be found here and here. There is also a nice solution for the upcoming grid-layouts.

Salzman answered 18/9, 2017 at 15:11 Comment(1)

This comment was super useful. Was trying to find a nice solution for breaking out of the Materialize CSS grid layout container and this did the trick – Proverbial 26/2, 2018 at 22:3

If I understood correctly,

style="width: 100%; position:absolute;"

should achieve what you're going for.

Extremely answered 14/10, 2011 at 1:53 Comment(0)

The more semantically correct way of doing this is to put your header outside of your main container, avoiding the position:absolute.

Example:

<html>
  <head>
    <title>A title</title>
    <style type="text/css">
      .main-content {
        width: 70%;
        margin: 0 auto; 
      }
    </style>
  </head>
  <body>
    <header><!-- Some header stuff --></header>
    <section class="main-content"><!-- Content you already have that takes up 70% --></section>
  <body>
</html>

The other method (keeping it in <section class="main-content">) is as you said, incorrect, as a div (or section) is supposed to contain elements, not have them extend out of bounds of their parent div/section. You'll also face problems in IE (I believe anything 7 or below, this might just be IE6 or less though) if your child div extends outside the parent div.

Aggrandize answered 14/10, 2011 at 2:33 Comment(2)

+1 This is close to how I would do it, but you can leave the width declaration off of the .header styles (or do width: auto). By default the block level element is as wide as it's containing element. That way you don't run into issues when adding margin/padding to it. I wouldn't say this is the more "semantic" method, but it's less messy. – Thrift 14/10, 2011 at 3:17

Good points both, I edited above to remove the unnecessary CSS on the header and used HTML5 elements to make the code more semantic...that wasn't the right word, maybe just more proper ;) – Aggrandize 14/10, 2011 at 4:50

There are a couple of ways you could do this.

Absolute Positioning
Like others have suggested, if you give the element that you want to stretch across the page CSS properties of 100% width and absolute position, it will span the entire width of the page.

However, it will also be situated at the top of the page, probably obscuring your other content, which won't make room for your now 100% content. Absolute positioning removes the element from the document flow, so it will act as though your newly positioned content doesn't exist. Unless you're prepared to calculate exactly where your new element should be and make room for it, this is probably not the best way.

Images: you can also use a collection of images to get at what you want, but good luck updating it or making changes to the height of any part of your page, etc. Again, not great for maintainability.

Nested DIVs
This is how I would suggest you do it. Before we worry about any of the 100% width stuff, I'll first show you how to set up the 70% centered look.

<div class="header">
<div class="center">
  // Header content
</div>
</div>
<div class="mainContent">
<div class="center">
  // Main content
</div>
</div>
<div class="footer">
<div class="center">
  // Footer content
</div>
</div>

With CSS like this:

.center {
  width: 70%;
  margin: 0 auto;
}

Now you have what appears to be a container around your centered content, when in reality each row of content moving down the page is made up of a containing div, with a semantic and descriptive class (like header, mainContent, etc.), with a "center" class inside of it.

With that set up, making the header appear to "break out of the container div" is as easy as:

.header {
  background-color: navy;
}

And the color reaches to the edges of the page. If for some reason you want the content itself to stretch across the page, you could do:

.header .center {
  width: auto;
}

And that style would override the .center style, and make the header's content extend to the edges of the page.

Good luck!

Tertullian answered 14/10, 2011 at 3:18 Comment(0)

You can use white-space:normal propoerty of css.

Graze answered 18/8, 2023 at 12:52 Comment(0)

Recommended topics

Hot tags