Put an iframe on the right - html

Question

So I want to make an iframe for a page that would display a selection of teas and herbal teas, and I want the options on the left in another iframe. Though, it's been so long I haventdone that and I oly didit with DreamWeaver before (I'm unexperienced so I followed a teacher's tutorial), so the software generated most of the code, really. Could anyone help me please? Right now, here's the iframe's code along with the banner:
<div class="container">
<img src="images/bannersite.png" alt="Banner" style="width:100%;">
<div class="bigtxt" style="left: 100px; top: 70px; position: absolute;">
<span style="color: #B3D1B3;">Ma</span><span style="color: #404040;">Thé</span>
</div>
</div>
<iframe src="accueil.html" style="width: 99.8%;">
</iframe>
Here's what it looks like:
As you can see, there's a scrolling bar below, and that's because for some reason theiframe decided it would continue on the left of the banner's right end, and I don't want that. I want the iframe and the banner to both fit the whole screen.
Here's what I would like to do but have no clue how:
Thanks for anyone who's willing to help me.

Answer 1

Please take a note, iframes are not good for SEO. It's much better to use java script or jquery driven pieces of code. Google and others are not trustibg to iframe, making yuor website rating a lot decrese.

Answer 2

Have a look at this codepen, I think it does what you are looking for.
https://codepen.io/larrytherabbit/pen/mdPGzdm
I edited your code a bit and please read the comments I made for you to better understand the new lines of code. There is a HTML code and a CSS code that applies to it, with classes (they begin with a ".")
HTML
<div class="container"> <!-- this is the container for the picture and the "MaThé" text -->
<img src="https://images.all-free-download.com/images/graphicthumb/sunflower_background_03_hd_picture_165827.jpg" alt="Banner">
<div class="bigtxt" style="left: 100px; top: 70px; position: absolute;">
<span style="color: #B3D1B3;">Ma</span>
<span style="color: #404040;">Thé</span>
</div>
</div> <!-- top header container closes here -->
<div class="flex-container"> <!-- this is the container for the sidebar and the iframe on the right -->
<div class="sidebar">
<button>Button</button>
<button>Button</button>
<button>Button</button>
</div>
<iframe src="https://www.youtube.com/embed/sJIjIMMIoSw" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
CSS
.container img {
width:100%;max-height:250px;
}
.bigtxt {
font-size:50px;
}
.flex-container { /* the display attribute set to flex creates a "flexbox" display, please see here: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox */
display:flex;width:100%;
}
.sidebar { /* this container is also set to flex, but here we change the flex-direction to column for the buttons to display in a column */
display:flex;flex-direction:column;height:300px;justify-content:center;width:30%;align-items:center; /* giving a width of 30% to the sidebar, it will fill 30% of the available space, which is 100% of the window width as defined above */ /* by setting align-items and justify-content to "center" the buttons place themselves in the middle of the sidebar */
}
.sidebar button {
margin:30px 0;max-width:100px; /* giving a bottom and a top margin ofo 30px to the buttons to space them apart */
}
iframe {
width:70%; /* here we simply set the width of the iframe to the remaining space which is 70% of the 100% width of the .flexbox container */
}