Question

I had a div containing a bunch of tags with corresponding css, all of which needs to be moved into an iframe. However, when I do that, the iframe version looks different.

I have already copied the css that was applied to those parts of the parent page into the stylesheet for the iframe. However when styling the border of the div -> iframe, it’s unclear which styles should be applied to the body tag of the iframe, and which styles should be applied the iframe tag in the parent page.

Answer 1

You just need to give both elements the same style.

HTML

<iframe src="http://example.com" frameborder="0"></iframe>
<div></div>

Note: The frameborder attribute is essential for IE<9 to avoid the ugly looking 3D border.

CSS

iframe,div {
    width: 450px;
    height: 250px;
    border: 1px solid #ccc;
    display: block;

    padding: 0;
    margin: 10px 20px;
}

Here’s a fiddle containing that code.