how to override css class with an underlying class - html

Question

I have written a small code of CSS which goes like this,
<div class="wrapper">
the wrapper has width:1120px; everything inside it
<div class="callout">
I want this to be full width rather than width 1120px
</div><!-- end for callout -->
other things inside it normal at width 1120px
</div><!-- end wrapper -->
How can I achieve this How can I disable the wrapper behavior for the specific class inside it

Answer 1

One standard way to approach this situation is to add .callout beneath (and, importantly, outside) .wrapper in the structural markup...
... and then use css to push .callout back up the display so it no longer appears beneath .wrapper in the browser display.
Of course, if you take this approach, you must be sure to leave enough space for .callout to be moved up into.
.wrapper {
width: 1120px;
border: 1px solid red;
}
div p {
height: 40px;
line-height: 40px;
margin: 20px;
}
.wrapper p:nth-of-type(2) {
margin-bottom: 80px;
}
.callout {
position: relative;
top: -140px;
background-color: blue;
}
<div class="wrapper">
<p>the wrapper has width:1120px;</p>
<p>everything inside it</p>
<p>other things inside it normal at width:1120px</p>
</div>
<div class="callout">
<p>I want this to be full width rather than width:1120px</p>
</div>

Answer 2

You wrote: "I have written a small code of css which goes like this"
I assume that you know this is HTML, not CSS. If that's not clear, you are missing the basics. Anyway:
(This is no copy&pastable code solution, but it explains why you can't do what you want to do easiliy and what you can do if you want to do it anyway...)
Usually you achieve full width for a block element by giving it width: 100%. However, percentage width values are always in relation to the parent element (in your case .wrapper, not the window width). You could use javascript/jQuery to get the viewport/window width and assign that to your .callout class. If you do that, you also have to add .wrapper {overflow-x: visible;} to your CSS, otherwise the .callout's maximum width will still be limited to the wrapper's width.
Another solution would be to have the .callout DIV not inside the .wrapper DIV (but after or before it) in the HTML, so it's independent from it. Then you can simply define width: 100% for .callout. You could also have DIVs with class .wrapper before and after the .callout DIV.
You can also achieve an independent width by using position: absolute for .callout, however, in this case the absolutely positioned element is considered completely idependent (except the position reference), meaning that it will also have no vertical or horizontal space reserved for it in the parent element, which can result in content of the parent element being hidden or displayed in a not-intended way. (you'd have to insert something in the parent element that creates enough empty vertical space for your absolutely positioned child element before the parent content continues.But this solution is not so good, since the needed vertical space will always depend on screen/viewport width and on the content.

Answer 3

If you have to achieve it only using html and css, I think, you can do another way:
<section>
<div class="wrapper">
...
</div>
</section>
<section>
<div class="callout">
...
</div>
</section>
<section>
<div class="wrapper">
...
</div>
</section>
CSS
.wrapper {
width: 1120px;
}
...

Answer 4

If you want to keep the current markup and make no changes (as others noted), you may use position property like this:
Markup
<div class="parent">
<p>parent</p>
<div class="wrapper">
<p>wrapper</p>
<div class="callout">
<p>callout</p>
</div><!-- end for callout -->
</div><!-- end wrapper -->
</div><!-- end parent -->
CSS
.parent{
position: relative;
}
.wrapper{
width: 1120px;
margin: 0 auto;
}
.callout{
position: absolute;
left: 0;
}
In action
.parent{
position: relative;
height: 300px;
padding: 10px 0;
background-color: #99ff99;
text-align: center;
}
.wrapper{
width: 200px;
margin: 0 auto;
height: 100px;
padding: 30px 0;
background-color: #ff9999;
}
.callout{
position: absolute;
width: 100%;
height: 50px;
left: 0;
background-color: #9999ff;
}
<div class="parent">
<p>parent</p>
<div class="wrapper">
<p>wrapper</p>
<div class="callout">
<p>callout</p>
</div><!-- end for callout -->
</div><!-- end wrapper -->
</div><!-- end parent -->