How to isolate CSS rules inside a div?


Tags: javascript,html,css

Problem :

I need to load an html page inside a div in the following pseudo page:

<html>
    <head></head>
    <style>
        body {
            background-color: yellow;
        }
    </style>
    <body>
        <div style="display:none">
            <html>
                <head></head>
                <style>
                    body {
                        background-color: blue;
                    }
                </style>
                <body>
                    <div style="display:none">
                        ...
                    </div>
                </body>
            </html>
        </div>
    </body>
</html>

What naturally happens in this code is that the background will turn blue, as it is being changed in the middle of the page. Is there a way to isolate this div? So it would act similarly to an iframe. The content inside the div is stored in a variable, so I think I cannot use a frame, as the html code is not stored in a file to use it as a source.

Thank you!



Solution :

This is just wrong. An HTML document can only have one html tag and one body tag, otherwise it will be an invalid document, browsers won't allow it.

If you load an iframe, instead, it will have his own #document and it's fine.


    CSS Howto..

    How to select the parent's parent in CSS?

    how to prevent css and js being cached by internet service provider?

    How to create a perspective shadow with CSS?

    CSS? How is this arrow made?

    How to fix this mouse hover transform scale effect (animation provided)

    How to create a cross with pure css [duplicate]

    How do I get stack my web page content in to 2 columns and be consistent on page sizes

    How to add hover effect to using CKEditor?
    Here is a script to highlight columns where there is checkmarks with an orange background-color. var CKE = $( '.editor' ); CKE.ckeditor(); var columnIndex=0; $("#update").click(function(){ // Output CKEditor's result in...
    Read more

    HTML DIV Overflowing, How To Stop?

    How to resize all div images to a particular size?

    How to prevent artifacts from appearing in Webkit when scrolling the page after stopping CSS animations

    How to make UL Tabs with only HTML CSS

    How to create a circumference with CSS? [closed]

    How to do like this list using
  • and CSS?
  • How to create a zig zag banner with css

    [HTML][CSS] How to change opacity of background-image but not the text on it?

    How to show only the top portion of an image with CSS?

    How can I align my HTML components with CSS?

    How to create a lightbox like this [closed]

    How manage Divisions in browser resizing

    How to “break line” via CSS?

    How do I make my CSS link up to files in different directories

    How to add a media attribute to the CSS LINK html tag for the ASP.NET WebResource.axd Http Handler

    How to style diff implementation for PHP with CSS

    How do I take code from Codepen, and use it locally?

    How to add left border with image(s) dynamically

    how to put img inside circle in html and css?

    How to make a div 100% accross

    Any ideas on how I could implement a grid-view in CSS? - CSS

    How to place a div on right side of cascading tables - CSS