Put An Iframe On The Right

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 hav

Solution 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.

Solution 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

<divclass="container"><!-- this is the container for the picture and the "MaThé" text --><imgsrc="https://images.all-free-download.com/images/graphicthumb/sunflower_background_03_hd_picture_165827.jpg"alt="Banner"><divclass="bigtxt"style="left: 100px; top: 70px; position: absolute;"><spanstyle="color: #B3D1B3;">Ma</span><spanstyle="color: #404040;">Thé</span></div></div><!-- top header container closes here --><divclass="flex-container"><!-- this is the container for the sidebar and the iframe on the right --><divclass="sidebar"><button>Button</button><button>Button</button><button>Button</button></div><iframesrc="https://www.youtube.com/embed/sJIjIMMIoSw"frameborder="0"allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"allowfullscreen></iframe>

CSS

.containerimg {
  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 */
}

.sidebarbutton {
  margin:30px0;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 */
}