CODEWITHSUNDEEP
htmlcssiframe
Abdall
Abdall

Reputation: 455

Making iframe fit into an element that has left-margin set

Hi all I think this should be a relatively quick question but since I am a beginner to HTML and CSS I can't seem to figure this out.

I have the following CSS code:

<style>
  div.specialspecial {
    width: 100%;
    height: 0;
    padding-bottom: 56%; 
    position: relative;
    margin-left: 160px;
  }

  iframe {
    width: 90%;
    height: 100%;
    position: absolute;
    display: block;
  }

</style>

And this html code:

<div class="specialspecial">
    <iframe src='dirToLocalHTML' id = 'bg'></iframe>
</div>

It seems that the margin-left set in the div class (which I need as I am using a sidebar on this website) makes it so the content inside the iframe is off center (presumably by 160px). Is there a way for me to use CSS to easily fix this? Or will I need to resort to JavaScript to resize the frame? I am comfortable with learning either approach.

Edit: Apologies for not providing enough information. Hopefully adding this will help:

This is the body of my html:

<body>

<div class="w3-sidebar w3-bar-block w3-light-grey w3-card-2" style="width:160px;">

  <button class="w3-button w3-block w3-left-align" onclick="myAccFunc('demoAcc')">
  Accordion <i class="fa fa-caret-down"></i>
  </button>

  <div id="demoAcc" class="w3-hide w3-white w3-card-2">
    <a href="#" class="w3-bar-item w3-button">Link</a>
    <a href="#" class="w3-bar-item w3-button">Link</a>
  </div>

</div>

<div class="specialspecial">
    <iframe src='dirToLocalHTML' id = 'bg'></iframe>
</div>

</body>

This code is mainly taken from the example of: https://www.w3schools.com/w3css/tryit.asp?filename=tryw3css_sidebar_accordion

As I am trying to get a similar style for my webpage

Upvotes: 1

Views: 3746

Answers (1)

isherwood
isherwood

Reputation: 61055

I think the best fix is to simply create a container for the iframe that isolates it from the element with the large margin:

<div class="specialspecial">
    <div class="pageContent">
        <iframe src='dirToLocalHTML' id = 'bg'></iframe>
    </div>
</div>

Even with no additional CSS, this should restrain the size of the iframe, which will get its size from the element without the large margin.

It's worth noting that layouts like that, which rely on large margins for side content, are somewhat archaic. Each part of the document should be contained in an element that doesn't care what's happening around it. 

<style>
.page-container > * {
    display: inline-block;
}
.page-sidebar {
    width: 160px;
}

<div class="page-container">
    <nav class="page-sidebar"></nav>
    <main class="page-content"></main>
<div>

See also: http://www.developer.com/lang/understanding-the-proper-way-to-lay-out-a-page-with-html5.html

Upvotes: 1

Related Questions