The reason you are seeing this is that
DIV is a block level element, and it's default behavior is to stack vertically as you have found.
The ways to alter this behavior are for that DIV to have
styles placed onto it that alter the defaults OR to nest it within an
inline element.
There are multiple ways you can do this; you could use a library such as
Bootstrap which will give you predefined element style or you could simply add in a few lines of CSS to do the same thing.
I am not going to go into
Bootstrap as it is well documented.
To do this via CSS, you can simply change
Display parameter of the DIV in question to
inline or
inline-block/
The following code added into the
head of your document will alter all DIVs that have the
iframe-container class, which will allow your iframes to be side-by-side (if the page width allows it)
<style type="text/css">
.iframe-container { display: inline-block; }
</style>Adding in a second line of CSS will allow you to remove some of the attributes from the iframes (height, width, style)
<style type="text/css">
.iframe-container {display: inline;}
.iframe-container iframe {height: 180px; width: 600px; border: 2px solid #ccc;}
</style>
Submit an article or tip