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..

    How to get On/Off FlipSwitch to trigger function

    How to properly style current_page_item based from theme

    How to add border to galleria big image?

    How to add Background Image in css using master page

    How to select a range of elements in repeated pattern

    How to float a word next to animated text

    How to force div width with CSS to stretch to its content but not to be restricted by its container?

    How to rotate a div, while jQuery animates the same div

    How to echo individual css classes for li's?

    How to set a div's position inside another div to bottom right corner?

    How to make mouse hover not shift background downward? (Beginner CSS)

    How to get a hidden content to show over cursor using html, css, javascript?

    How to make this arrow in CSS only?

    How can I use AngularJS directive to apply css style for a string?

    How can I target text input fields with CSS?

    Should be Simple: How to preserve data on a page of basic javascript/css/html when going to another page

    How do I set these li elements under eachother?

    how to get double border in using CSS?

    How do I require an HTML document (webpage) to be a certain size, or use scroll bars

    Only Javascript code to show a class without onclick

    how to add background image to css3 arrow

    How to use css method of rotation in jquery

    how to pass context value to css

    How to contol a CSS property with Javascript

    How to insert background image on HTML Tag using css?

    How do I align my navbar so it's permanently in the middle of my white box (without padding etc)?

    How can we customize vs2010 css editor template?

    two divs in one div with img in each two, how to autoresize but keep row formation?

    How to change CSS of website if accessed through a mobile browser [closed]

    How can I disable shrinking/resiziing images in Twitter Bootstrap?