Alignment of iframe

Question

Using this question as a starting point I've changed things a little to match my purpose. Unfortunately I don't seem to be able to save this in jsfiddle as after saving the result always is "404 That page doesn't exist."

So here's the original code:
http://jsfiddle.net/JP3zW/

/* In a Reset CSS */

body, div {
    margin: 0;
    padding: 0;
}

/* Style CSS */

html, body { height: 100%; }

body {
    position: relative;
    background: #F4F4F4;
}

iframe#iframe {
    width: calc(100% - 200px);
    height: calc(100% - 100px);
    overflow: hidden;
}

div#sidebar {
    top: 0;
    right: 0;
    position: fixed !important;
    height: 100%;
    width: 200px;
    background: gray;
}

div#bottombar {
    bottom: 0;
    height: 100px;
    width: 100%;
    background: black;
    z-index: -1;
}

<iframe id="iframe" name="iframe1" frameborder="0" height="100%" width="100%" src="http://someurl.com"></iframe>

<div id="bars">
     <div id="bottombar"></div>
     <div id="sidebar"></div>
</div>

The result is, that the iframe somehow is displayed centered. However I'd like to have it aligned with the top left corner so that the left part of the embedded contents is visible.

I've tried align="left" and other in the HTML iframe definition but to no avail.

What do I need to do to have the contents of the iframe aligned top left?

Answer 1

As I see it, your iframe displays correct, but the sidebar is just overlapping the iframe because of the position: fixed. I have changed a bit in the CSS, and used percentage instead of pixels, for it to be responsive.

Let me know if it works for you.

/* In a Reset CSS */
body,
div {
  margin: 0;
  padding: 0;
}

/* Style CSS */
html,
body {
  height: 100%;
}

body {
  position: relative;
  background: #F4F4F4;
}

iframe#id_iframe {
  width: 70%;
  float:right;
  height: 100%;
  overflow: hidden;
}

div#id_sidebar {
  float:left;
  height: 100%;
  width: 30%;
  background: lightgray;
}