how to overide css class with an underlying class


Tags: html,css

Problem :

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 specific class inside it



Solution :

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.


    CSS Howto..

    Make Dojo or Ext JS4 widgets look and behave like Kendo UI. How demanding will it be?

    How to make circle thing in CSS? [duplicate]

    How do I get a dropdown choice to show up on the left of an entry on this To-Do list?

    How to make this button is CSS with Angled , Drop shadow, Inset shadow with flexibility in width

    How to create reusable Durandal widgets

    How do I get this ul li dropdown menu to show on hover with jquery or javascript?

    How to reset a jquery function on-the-fly

    CSS: When I add a button to my container, my layout breaks, how to avoid this?

    How to center text in lists?

    LESS: How to specify current tag with nesting?

    how to accomplish this border effect in css?

    How to create a skin for mediaelement.js?

    I was wondering how I would make an image appear when I hover over another image [closed]

    How to draw heart with text in middle?

    How to change custom Check Box border with Dart

    How can I center my text on top of an image, given that it's responsive?

    How to reference this line in CSS, HTML

    How to free a paragraph from its CSS style?

    How to make a button go down when scrolling? (CSS)

    How to make an item to appear for a short time (Either Javascript or CSS) [closed]

    How do you deploy a project using Less CSS to Heroku?

    how to set up responsive columns with pure CSS?

    How to stop these two divs/navbars from overlapping in Bootstrap

    How to check the CSS hyphens in effect using Chrome developer tools?

    How to use CSS to horizontally fill the width of page with HTML menu headers?

    How to create CSS3 bounce effect

    How to make gridview in asp.net scrollable?

    How can I animate my div to go from top to bottom whithout interfering with the content inside?

    How to preserve CSS using iTextSharp?

    How Do I Perfectly Center a Float Element in Between Two Floated Elements?