Can an element stick to an Iframe?-CodePudding

I tried to use transform and padding on my element, but it didn't work quite well when you resize your window. It sometimes even goes out of my window. I tried to transform one like 60% to the right and the other one 40%, but that didn't work too. So I want my element to be stuck together with an iframe.

#weertekst{
  font-weight:bold;
}

#test {
    background-color: #0032A1;
    height: 515.5px;
    width: 200px;
    border-top-left-radius:20px ;
    border-bottom-left-radius:20px ;
    margin: 0px;
    padding: 0px;
    justify-content: center;
    align-items: center;
  
    /* Positioning */
    position: static;
    top: auto;
    bottom: auto;
    right: auto;
    left: auto;
    float: none;
    display: flex;
    clear: none;
    z-index: auto;
}

  #intest{
    width: 180px;
    height: 453px;
    text-align: center;
    display: flex;
    flex-direction: column;
  }

<div id="pad">
    <div id="test">
      <div id="intest">
        <div id="dag-datum">
          <div id="dag"><h3>Vandaag</h3></div>
          <div ><span id="datum">...</span></div>
        </div>
        <div id="weer-logo"><img id="plaatje"></div>
        <div id="weer-tekst"><span id="weertekst">...</span></div>
        <div id="graden"><h3><!---Temp:---> <span id="temperatuur">...</span> ºC</h3></div>
        <div id="directie"><h3 id="nbold">Windrichting:<br></h3> <h3><span id="winddir"></span></h3></div>
        <div id="snelheid"><h3 id="nbold">Windsnelheid:<br></h3> <h3><span id="windspeed"></span></h3></div>
      </div>
    </div>
  </div>

  <div id="kaart">
    <iframe id="radarbeeld" width=503.5 height=515.5>
    </iframe>
  </div>

CodePudding user response：

Nest your code in a wrapper and use position: sticky;. Also, you were using a lot of padding which seemed unnecessary so I removed it. See the CSS changes I made below.

#pad {
  float: left;

  
}

#kaart {
  display: block;
transform: translateX(-30px);
  text-align: center;
 

}

#weertekst{
  font-weight:bold;
}

#test {
 
   
  
   
    background-color: #0032A1;
   
  
    height: 520px;
    width: 200px;
    border-top-left-radius:20px ;
    border-bottom-left-radius:20px ;
    margin: 0px;
    padding: 0px;
    margin-right: 1.8rem;
  
    /* Positioning */
    position: sticky;
    top: auto;
    bottom: auto;
    right: auto;
    left: auto;
    float: none;
    display: flex;
    clear: none;
    z-index: auto;
}

  #intest{
    width: 180px;
    height: 453px;
    text-align: center;
    display: flex;
    flex-direction: column;
  }
  

  
  .wrapper {
    display: flex;
    justify-content: center;
  }

<div >
<div id="pad">
    <div id="test">
      <div id="intest">
        <div id="dag-datum">
          <div id="dag"><h3>Vandaag</h3></div>
          <div ><span id="datum">...</span></div>
        </div>
        <div id="weer-logo"><img id="plaatje"></div>
        <div id="weer-tekst"><span id="weertekst">...</span></div>
        <div id="graden"><h3><!---Temp:---> <span id="temperatuur">...</span> ºC</h3></div>
        <div id="directie"><h3 id="nbold">Windrichting:<br></h3> <h3><span id="winddir"></span></h3></div>
        <div id="snelheid"><h3 id="nbold">Windsnelheid:<br></h3> <h3><span id="windspeed"></span></h3></div>
      </div>
    </div>
  </div>

  <div id="kaart">
    <iframe id="radarbeeld" width=503.5 height=515.5>
    </iframe>
  </div>
</div>

CodePudding user response：

Using Bootstrap 5, the content that takes up 40% of the screen and the other 60% of the full screen size can be made as follows.

#pad {
    float: left;
}

#kaart {
    display: block;
    transform: translateX(-30px);
    text-align: center;
}

#weertekst {
    font-weight: bold;
}

#test {
    background-color: #0032A1;
    height: 515.5px;
    border-top-left-radius: 20px;
    border-bottom-left-radius: 20px;
    margin: 0px;
    padding: 0px;
    justify-content: center;
    align-items: center;

    /* Positioning */
    position: static;
    top: auto;
    bottom: auto;
    right: auto;
    left: auto;
    float: none;
    display: flex;
    clear: none;
    z-index: auto;
}

#intest {
    width: 180px;
    height: 453px;
    text-align: center;
    display: flex;
    flex-direction: column;
}

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
        integrity="sha384-Vkoo8x4CGsO3 Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
    <title>Document</title>
</head>

<body>
  <div style="margin: 75px;">
    <div >
        <div >
            <div id="pad"  style="width: 100% !important;">
                <div id="test">
                    <div id="intest">
                        <div id="dag-datum">
                            <div id="dag">
                                <h3>Vandaag</h3>
                            </div>
                            <div ><span id="datum">...</span></div>
                        </div>
                        <div id="weer-logo"><img id="plaatje"></div>
                        <div id="weer-tekst"><span id="weertekst">...</span></div>
                        <div id="graden">
                            <h3>
                                <!---Temp:---> <span id="temperatuur">...</span> ºC</h3>
                        </div>
                        <div id="directie">
                            <h3 id="nbold">Windrichting:<br></h3>
                            <h3><span id="winddir"></span></h3>
                        </div>
                        <div id="snelheid">
                            <h3 id="nbold">Windsnelheid:<br></h3>
                            <h3><span id="windspeed"></span></h3>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div >
            <div id="kaart" style="width: 100% !important;">
                <iframe id="radarbeeld" height=515.5 style="width: 100% !important;">
                </iframe>
            </div>
        </div>
  
  </div>

</body>

</html>