Make child div stretch across width of page

Question

Suppose I have the following HTML code:

<div id="container" style="width: 960px">
   <div id="help_panel" style="width: 100%; margin: 0 auto;">
     Content goes here.
   </div> 
</div>

If I want the help_panel div to stretch across the width of the page/broswer, even if the width of the page/browser is wider than 960px (which is the width set for the container div), is it possible to do it with the above structure? I want to get the help panel div to expand beyond the width limits set in the container div if the page is wider than 960px.

I am curious if this can be accomplished with the above structure. Or will I have to put the help_panel div outside of the container div to make it work?

Thanks!

Ely

Answer 1

Yes it can be done. You need to use

position:absolute;
left:0;
right:0;

Check working example at http://jsfiddle.net/bJbgJ/3/

Grajeda

This works, but does not take into account any content after the full width element (see @esel's answer). Is it possible to do something like this but still affect the rest of the content? – Chemisorb

This does not work if the child that you're setting has a parent that is set to position:relative that is not the full width of the page. – Loveless

Why is this not working on textarea? Whats the difference between textarea (display: block) and div? It is not acting the same way. – Pick

@LucyBain - i had the same problem. you can use jQuery on page load to add a bottom margin to the container, it will then show all of the child div content. var cntmarg = $( "#help-panel" ).height(); $("#container").css('margin-bottom', cntmarg); – Leisha

Answer 2

With current browsers (this question is dating a bit now), you can use the much simpler vw (viewport width) unit:

#help_panel {
  margin-left: calc(50% - 50vw);
  width: 100vw;
}

(usage data: http://caniuse.com/#feat=viewport-units)

From my tests, this should not break your flow while being easy to use.

Chowder

This is good. Even better without using calc: coderwall.com/p/hkgamw/… – Diffusivity

I love😍 it! Maybe good to add that it only works if the containing parent is in the centered on the page (it had me scratching my head for a while how it works). Basically the margin-left: 50% centers the left-margin in the parent container (which is the center of the page if the parent container is centered), then -50vw moves it left half a page. – Burkley

Answer 3

Yes you can, set the position: relative for the container and position: absolute for the help_panel

Nikolia

not quite... container needs to have position:static, which it does by default. If you set it to relative, the nested div will stretch to the parent width even with position:absolute set. – Ieper

Answer 4

You can use 100vw (viewport width). 100vw means 100% of the viewport. vw is supported by all major browsers, including IE9+.

<div id="container" style="width: 960px">
   <div id="help_panel" style="width: 100vw; margin: 0 auto;">
     Content goes here.
   </div> 
</div>

Stacystadholder

Answer 5

you can pull it out of the flow by setting position:absolute on it, but you'll have different display issues to deal with. Or you can explicitly set the width to > 960.

Ieper

Answer 6

You could do it with jQuery...

$("#help_panel").width($(window).width());

Otherwise, as far as css goes, I'm fairly sure you would have to sit the help_panel div on the outside of container using position:absolute styling: http://css-tricks.com/forums/discussion/2318/give-child-div-width%3A100-of-page-width-inside-parent./p1

Fullfledged

Answer 7

You could take it out of the flow with position:absolute. But the helper_panel will oberlap with other stuff. (I added orders, to see the divs)

<div id="container" style="width: 960px; border:1px solid #f00;">
    Text before<br>
   <div id="help_panel" style="width: 100%; position:absolute; margin: 0 auto; border:1px solid #0f0;">
     Content goes here.
   </div> 
   This is behind the help_penal
</div>

Orthogenesis

Answer 8

Just set the width to 100vw like this:

<div id="container" style="width: 100vw">
 <div id="help_panel" style="width: 100%; margin: 0 auto;">
  Content goes here.
 </div> 
</div>

Ras

It pushes content out right, but does not overlap the parent on the left, for me at any rate – Kauffmann

Answer 9

Since position: absolute; and viewport width were no options in my special case, there is another quick solution to solve the problem. The only condition is, that overflow in x-direction is not necessary for your website.

You can define negative margins for your element:

#help_panel {
    margin-left: -9999px;
    margin-right: -9999px;
}

But since we get overflow doing this, we have to avoid overflow in x-direction globally e.g. for body:

body {
    overflow-x: hidden;
}

You can set padding to choose the size of your content.

Note that this solution does not bring 100% width for content, but it is helpful in cases where you need e.g. a background color which has full width with a content still depending on container.

Ticktack

It might work for colour alone, but if I put content inside it, it gets pushed off the screen to the left – Kauffmann

Answer 10

...............In HTML Format

<div id="a">Full Width</div>

...............In CSS Format

#a { background-color: green;width: 100%;height: 80px;border: 1px solid;margin: 0 auto;} 

    body { padding: 0;margin: 0}

Pentomic

Answer 11

Try this: it will use all of the screen width:

min-width: 100vw;

Estaminet

Answer 12

I know this post is old, in case someone stumbles upon it in 2019, this would work try it.

//html
<div id="container">
<div id="help_panel">
<div class="help_panel_extra_if_you_want"> //then if you want to add some height and width if you want, do this.

</div>
</div>
</div>

//css
#container{
left: 0px;
top: 0px;
right: 0px;
z-index: 100;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-pack: start;
-webkit-justify-content: flex-start;
-ms-flex-pack: start;
justify-content: flex-start;    
position: relative;
height:650px;
margin-top:55px;
margin-bottom:-20px;
}

#help_panel {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
padding-right: 24px;
padding-left: 18px;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;

.help_panel_extra_if_you_want{
height:650px;
position: relative;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;
-webkit-box-pack: justify;
-webkit-justify-content: space-between;
-ms-flex-pack: justify;
justify-content: space-between;
align-items: center;
display: flex;
width: 95%;
max-width: 1200px;
}

SHOULD GIVE YOU SOMETHING LIKE THIS

Publicize

This is not answer this question at all. – Contrition

Answer 13

You can do:

margin-left: -50%;
margin-right: -50%;

Vermifuge

This did nothing for me. Didn't move the div, didn't resize it. – Manhandle