How to override parent containers width property in CSS

Question

I am having trouble overriding the parent's width within my CSS. Essentially, I have a parent and a child div like:

.parent{ width: 768px; background-color: red; }
.child{ background-color:blue; }

<div class="parent">
    <div class="child">
        //content
    </div>
</div>

A lot of elements still use the parents parameter of 768px width, however I wish this one specific child element to extend the entire width of the screen - I have tried doing left: 0, right: 0, clearing the floats and setting the width to auto. I also wanted to avoid using !important if I can.

Any suggestions ?

An accurate representation of what I want would look like this:

   _____   
  |par. |
 _|_____|_
| child   |
|         |
|_________|
  |     |
  |_____|

@WilliamPaul Please do not delete your questions answered by people man!!! We take time and strain to answer and you will simply delete it, is it? Have some courtesy... — Praveen Kumar Purushothaman, Dec 09 '15 at 10:01
Question was marked as a duplicate of a much more fully answered question, marked by the community. There is no need for this to be here — William Paul, Dec 09 '15 at 11:56

score 7 · Accepted Answer · answered Oct 14 '15 at 16:33

7

Do this, use padding and margin (margin-left and margin-right and padding-left and padding-right) to achieve this.

<div class="parent">
  <p>This is parent</p>
  <div class="child">
    <p>This is child</p>
  </div>
  <p>This is still parent</p>
</div>

.parent{ width: 468px; background-color: red; margin: 0 auto; }
.child{
  background: blue;
  margin-left: -300vw;
  padding-left: 300vw;
  margin-right: -300vw;
  padding-right: 300vw;
}

http://cssdeck.com/labs/full/6xljy6pz

answered Oct 14 '15 at 16:33

Arber Braja

415
2
5

Hi the problem with substracting values is that it doesn't guarantee that the child container will align to the end of the screen, since each users' screen size may vary. Is there a way to cater for auto setting to override and start from the left edge of the screen? – Sade Sep 10 '21 at 07:34

score 3 · Answer 2 · answered Oct 14 '15 at 17:26

Try this https://jsfiddle.net/7txe5eev/. This will calculate and set margin for you. I assumed you are using bootstrap but if you get the logic you can modify this to fit your code.

HTML

<div class="container">
<div class="row">
    <div class="col-xs-offset-3 col-xs-6 parent">
        <div class="row">
            <div class="col-xs-12 divs red"></div>
        </div>
        <div class="row">
            <div class="col-xs-12 divs green special"></div>
        </div>
        <div class="row">
            <div class="col-xs-12 divs blue"></div>     
        </div>
    </div>
</div>

CSS

.divs {
    height: 200px;
    margin: 5px auto;
}

.red {
    background-color: red;
}

.green {
    background-color: green
}

.blue {
    background-color: blue;
}

.special {
    width: 100vw;
}

JS

$(document).ready(calcMargin);

$(window).resize(calcMargin);

function calcMargin() {
    var width = $('.parent').width() - $('.special').width();
    var leftMargin = width/2;

    $('.special').css('margin-left', leftMargin);
}

score -1 · Answer 3 · answered Oct 14 '15 at 16:28

Kind of hacky, but it works (in browsers that support calc and vw): http://jsfiddle.net/tvg2ocvs/

margin-left: calc(-50vw + (768px/2));
margin-right: calc(-50vw + (768px/2));

Doesn't look nice when viewport is smaller than 768px though, but nothing a media query won't fix :)

How to override parent containers width property in CSS

3 Answers3