CODEWITHSUNDEEP
htmlcssiframe
andrej
andrej

Reputation: 587

Two fixed iframe s (or div s) on the side

I can not see side2.html below the side1.html

page.html should scroll, side1.html and side2.html should be always visible, side1 above side2.

page.html 

<!DOCTYPE html>
<html>
<head>
    <title>page</title>
    <style type="text/css">
        <!--
        body.container {
            width: 100%;
            height: auto;
        }
        .maintext {
            float: right;
            width: calc(100% - 210px);
        }
        iframe.side1 {
            position: fixed;
            float: left;
            height: 600px;
            width: 200px;
        }
        iframe.side2 {
            position: fixed;
            float: left;
            top: 300px;
            height: 300px;
            width: 200px;
        }
        -->
    </style>
</head>
<body>

<a name="topw" id="toppage"></a>

<div class="container">
    <div class="maintext">
        <a name="dic"></a><h3>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Dict</h3><br/>
    </div>
    <iframe class="side1" src="side1.html" frameborder="0" />
    <iframe class="side2" src="side2.html" frameborder="0" />
</div>

</body>
</html>

side1.html

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<a class="menu" target="_parent" href="page.html#dic" title="title"       > title </a>

</body>

</html>

side2.html

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<a target="_blank" href="http://www.ubuntu.com" title="org">.org</a>
</body>

</html>

Or could I solve the problem just with div, without iframe. Something like here. But I can not make it work: side1 above side2

Upvotes: 2

Views: 226

Answers (2)

DreamTeK
DreamTeK

Reputation: 34297

Position fixed needs positioned elements top/right/down/left to reference it's offset. float will not work on fixed elements.

I have also change the height and offset of the elements so they will fill the users screen no matter what size it is.

Also as @Sim pointed out iframes are now self closing and should have a proper closing tag.

body.container {
  width:100%;
}
.maintext {
  min-height:1080px; /*to simulate content*/
  width:100%;
  box-sizing:border-box;
  padding-left:200px;
  background:#ddd;
}
.side1,
.side2{
  position: fixed;
  left:0; 
  width:200px;
}
iframe.side1 {
  top:0; 
  height:70%;
}
iframe.side2 {
  top:70%; 
  height:30%;
}
<div class="container">
  <div class="maintext">
    <a name="dic"></a><h3>Middle Div</h3><br/>
  </div>
  <iframe class="side1" src="side1.html" frameborder="0"></iframe>
  <iframe class="side2" src="side2.html" frameborder="0"></iframe>
</div>

Upvotes: 1

Sim
Sim

Reputation: 3317

  • you should close your iframes with </iframe>, because they aren't empty elements (to deal with browsers that do not support <iframe>, you could add a text between the opening and the closing tag of the iframe): https://www.w3.org/wiki/HTML/Elements/iframe

  • use top and left to position absolute when your element is position: fixed

I've modified your code (see comments):

<!DOCTYPE html>
<html>
<head>
    <title>page</title>

    <style type="text/css">
        body.container {
            width: 100%;
        }
        .maintext {
            float: right;
            width: calc(100% - 210px);
        }
        iframe.side1 {
            position: fixed;
            left: 0; /* use absolute positions when position fixed, not float */
            top: 0;
            height: 300px; /* 300px is enough, else it is behind your second iframe*/
            width: 200px;
        }
        iframe.side2 {
            position: fixed;
            left: 0;
            top: 300px;
            height: 300px;
            width: 200px;
        }
    </style>
</head>
<body>

<a name="topw" id="toppage"></a>

<div class="container">
    <div class="maintext">
        <a name="dic"></a><h3>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Dict</h3><br/>
    </div>

    <!-- always add a closing tag to your iframes -->
    <iframe class="side1" src="side1.html" frameborder="0" ></iframe>
    <iframe class="side2" src="side2.html" frameborder="0" ></iframe>

</div>

</body>
</html>

I hope that solve your problem...

Upvotes: 0

Related Questions