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 make a CSS div set auto height to content

    How to write this CSS-Selector (Target img from previous Anchor-Tag)

    How to create shaded divs like this with CSS

    How to make an image fully flexible in terms of display size?

    How do I get user-inputted information from the website directly to my e-mail?

    How to add new line in a Bootstrap button using CSS

    How can I overlap 2 images on image product in Magento?

    How can I display social media icons in a horizontal line instead of vertical row

    How to keep image lumpted with last word in a paragraph

    GWT: How to catch what code overrides the CSS cursor value. Or why it overrides?

    HTML5/CSS3 how to force text to require a certain width for rendering

    How to modify this CSS based Accordion to work with multiple accordions on the same page?

    How do you prevent expanding outer element when adding padding? [duplicate]

    How to center vertically and horizontally a heading text using flask-bootstrap

    CSS and jQuery current links navigation: how to update the
  • class
  • How to hide show image link on top of another image link

    How to make background image with aspect ratio in html and css [closed]

    How to add padding to anchor tags in Top Bar in Foundation 6?

    How to include PHP code in CSS?

    How to return WebElement having particular CSS property using JavascriptExecutor?

    How to have a table scroll only within a custom control on page? CSS help needed

    How to access regular CSS from GWT widget?

    How to move the search text box to the extreme right and Categories drop down to the left in html

    How to css 3rd li in hierarchy?

    how to display nav elements below each other inside of a header element

    how to link and apply external css file

    How do i make part of a CSS background fit perfectly to a browser

    Pure JavaScript - how to add class to a class? Or change style in class

    Is this how CSS LESS and SimpLESS work? [closed]

    CSS how to make a fixed height?