back to listing index

How can I expand a child div to 100% screen width if the container div is smaller?

[web search]
Original source (stackoverflow.com)
Tags: css css-expand-div-to-fill-entire-horizontal-width-100vw
Clipped on: 2016-04-30

The parent element of the whole page is a centered div limited to a max-width of 960px. All other elements on the page are children of that parent div. The simplified structure is the following:

<div id="parent">
  <div id="something"></div>
  <div id="wide-div></div>
  <div id="something-else></div>
</div>

While the parent div shouldn't expand beyond a width of 960px, the div I called "wide-div" here should fill the entire width of the screen. It contains a single image that is wider than the 960px, and it should set a different background color for the entire width of the screen.

I can't easily take that div out of the parent div, it would mess up other parts of my layout and it would make the whole thing rather awkward.

I found a few tricks on how you can achieve this, but none seemed to fit my requirements. My design is responsive, or at least I'm trying to achieve that. The tricks I found relied on knowing the size of the involved elements, which is not fixed in my case.

Is there a way to expand the inner div to the full screen width in a responsive layout?

asked Jul 13 '15 at 19:07
Image (Asset 2/6) alt=
Mad Scientist
8,05854376
1 upvote
  flag
by giving your wide div a width in px will give you the result you want. Its just to make it responsive you will have to use javascript to calculate it based on window size. You can also try and use the css calc() function. – floor Jul 13 '15 at 19:14
   upvote
  flag
I agree with @floor. Most wp themes that use wide sections calculate the width with javascript. The position:absolute approaches will probably fail to work on real websites. – Miro Jul 13 '15 at 19:28
   upvote
  flag
Can set child div to width 100vw and parent to overflow visible – Felype Jul 13 '15 at 19:48

You can set the width based on the vw (viewport width). You can use that value too using the calc function, to calculate a left-margin for the div. This way you can position it inside the flow, but still sticking out on the left and right side of the centered fixed-width div.

Support is pretty good. vw is supported by all major browsers, including IE9+. The same goes for calc(). If you need to support IE8 or Opera Mini, you're out of luck with this method.

div {
  min-height: 40px;
  box-sizing: border-box;
}
#parent {
  width: 400px;
  border: 1px solid black;
  margin: 0 auto;
}

#something {
  border: 2px solid red;
}

#wide-div {
  width: 100vw;
  margin-left: calc(-50vw + 50%);
  border: 2px solid green;
}
<div id="parent">
  <div id="something">Red</div>
  <div id="wide-div">Green</div>
  <div id="something-else"></div>
</div>

answered Jul 13 '15 at 19:15
Image (Asset 4/6) alt=
GolezTrol
81.2k477122
1 upvote
  flag
Warning: calc() is really buggy on iPad. – Miro Jul 13 '15 at 19:30
   upvote
  flag
This to me is the best answer. Using position: absolute on wide-div would cause it to cover up something-else. – Rick Hitchcock Jul 13 '15 at 19:30
   upvote
  flag
@miro, True, I overlooked that. Safari doesn't support using vw inside calc(), according to CanIUse... – GolezTrol Jul 13 '15 at 19:31

Typically the responsive element, bootstrap or Foundation, allow you to add a "row" element. You can put the "wide-div" outside an element with "row" and it should expand to take up the full width.

Alternatively, you can use absolute positioning for that element which ignores most inherited settings:

.wide-div {
    position: absolute;
    left: 0;
    right: 0;
}
answered Jul 13 '15 at 19:10
Image (Asset 5/6) alt=
Organiccat
2,791134076

you can use vw. demo http://jsfiddle.net/fsLhm6pk/

.parent {
    width:200px;
    height:200px; 
    background:red;
}
.child {
    width:100vw;
    height: 50px; 
    background:yellow;
}

you are right, this won't work with centered div, try this instead

EDIT http://jsfiddle.net/fsLhm6pk/1/

.parent {
width:200px;
height:200px; 
background:red;
margin:0 auto;
}
.child {
width:100%;
left:0; right:0;
position:absolute;
height: 50px; 
background:yellow;
}
answered Jul 13 '15 at 19:11
Image (Asset 6/6) alt=
wlin
1,107417
   upvote
  flag
Thia falls apart if the wrapper is centered. jsfiddle.net/jtz44br2 – Alexander O'Mara Jul 13 '15 at 19:12
   upvote
  flag
My parent div is centered, this expands the child div to the right, but not to the left. – Mad Scientist Jul 13 '15 at 19:13
1 upvote
  flag
It also isn't supported by all browsers.. if you care about that. – floor Jul 13 '15 at 19:13

The idea is to set the max-width only the 1st and 3d <div> instead of parent container.

body {
    margin: 0;
    text-align: center;
}
#something, #something-else {
    max-width: 960px;
    margin: 0 auto;
    background: yellow;
}
#wide-div {
    background: aqua;
}
#wide-div img {
    max-width: 100%;
    vertical-align: middle;
}
<div id="parent">
    <div id="something">*</div>
    <div id="wide-div"><img src="//dummyimage.com/1000x100" /></div>
    <div id="something-else">*</div>
</div>

answered Jul 13 '15 at 20:04
Pangloss
23.1k82453

Your Answer

asked

9 months ago

viewed

1383 times

active

9 months ago

Hot Network Questions

Technology Life / Arts Culture / Recreation Science Other
  1. Stack Overflow
  2. Server Fault
  3. Super User
  4. Web Applications
  5. Ask Ubuntu
  6. Webmasters
  7. Game Development
  8. TeX - LaTeX
  1. Programmers
  2. Unix & Linux
  3. Ask Different (Apple)
  4. WordPress Development
  5. Geographic Information Systems
  6. Electrical Engineering
  7. Android Enthusiasts
  8. Information Security
  1. Database Administrators
  2. Drupal Answers
  3. SharePoint
  4. User Experience
  5. Mathematica
  6. Salesforce
  7. ExpressionEngine® Answers
  8. more (13)
  1. Photography
  2. Science Fiction & Fantasy
  3. Graphic Design
  4. Movies & TV
  5. Seasoned Advice (cooking)
  6. Home Improvement
  7. Personal Finance & Money
  8. Academia
  9. more (9)
  1. English Language & Usage
  2. Skeptics
  3. Mi Yodeya (Judaism)
  4. Travel
  5. Christianity
  6. Arqade (gaming)
  7. Bicycles
  8. Role-playing Games
  9. more (21)
  1. Mathematics
  2. Cross Validated (stats)
  3. Theoretical Computer Science
  4. Physics
  5. MathOverflow
  6. Chemistry
  7. Biology
  8. more (5)
  1. Stack Apps
  2. Meta Stack Exchange
  3. Area 51
  4. Stack Overflow Careers
site design / logo © 2016 Stack Exchange Inc; user contributions licensed under cc by-sa 3.0 with attribution required
rev 2016.4.29.3525