How to override parent containers width property in CSS [duplicate]


Tags: html,css

Problem :

This question already has an answer here:

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   |
|         |
|_________|
  |     |
  |_____|


Solution :

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


    CSS Howto..

    How to place the same image at the top and at the bottom of the same column?

    How to use CSS to show rotated text in a table cell

    How to get page content to stretch and stick footer to bottom of page?

    how to move button to left

    How to inject css in another page

    how to keep conditional CSS statements for internet explorer in Express (Node.js) template

    How to temporarily modify the CSS of an element

    How do I make a div not display, if the browser window is at a certain width? [duplicate]

    HOW DO I MOVE THIS DIV UP TO BE ALLIGNED WITH THE FORM BOX [closed]

    How to give style to iframed page content using parent pages css?

    How to display thumbnail in dropdown CSS list along with other styling of text

    How to change the color of an active h5 tab using jQuery or CSS

    How do I keep parentheses of SASS / SCSS mixin?

    How to handle Chrome rendering dynamically added elements with incomplete CSS

    Yahoo's new blur effect in web mail - How?

    How to adjust the application with equal resolution in different browsers? [closed]

    WordPress admin stylesheet not showing images

    How to reduce amount of space between lines of text

    How to make a text slideshow using CSS/HTML/JAVA

    How to make text responsive to div size?

    How to add new line in a Bootstrap button using CSS

    Displaying a title and description on a jquery slideshow

    How to make the buttons responsive?

    how to set word break in table th or td, when column and table-layout auto using CSS

    How to let Fancybox Next and Previous button stay visible

    How to make a 3d button

    How to customize CSS depending on (tinier) window size?

    How to place a consistent 5px margin around an inner div without specifiying inner divs height?

    How to create these boxes with CSS and HTML [closed]

    How to specify discrete mapper style in cytoscapejs?