CODEWITHSUNDEEP
htmliframe
Stéphane Laurent
Stéphane Laurent

Reputation: 84529

Four iframes, two side by side

I have four iframes. I want them displayed as follows:

1 | 2
3 | 4

This is my code:

<!doctype html>

<head>
  <style type="text/css">
    .box {
      float: left;
      margin-right: 20px;
    }
    .clear {
      clear: both;
    }
  </style>
</head>

<html>
<p>
  <div class="box">
    <iframe src="webgl_sphereWithEquator.html" frameborder="0" scrolling="no" width="100%" height="512" align="left">
    </iframe>
  </div>
  <div class="box">
    <iframe src="webgl_hopftorus1.html" frameborder="0" scrolling="no" width="100%" height="512" align="right">
    </iframe>
  </div>
</p>

<p>
  <div class="box">
    <iframe src="webgl_sphereWithSlopedEquator.html" frameborder="0" scrolling="no" width="100%" height="512" align="left">
    </iframe>
  </div>
  <div class="box">
    <iframe src="webgl_hopftorus2.html" frameborder="0" scrolling="no" width="100%" height="512" align="right">
    </iframe>
  </div>
</p>

</html>

The <p> does not have the effect I expect. I get the four iframes on one line, side-by-side (each picture is an iframe):

enter image description here

How to "break" after two iframes ?

Upvotes: 1

Views: 1354

Answers (3)

UkFLSUI
UkFLSUI

Reputation: 5672

As Hidden Hobbes stated in comments section, adding clear class along with third box class will do the trick, like:

<div class="box clear">
    <iframe src="webgl_sphereWithSlopedEquator.html" frameborder="0" scrolling="no" width="100%" height="512" align="left">
    </iframe>
</div>

Additionally, you can also do it by using the box class to the parent of the div where iframe present, like:

<div class="box">
  <div>
    <iframe src="webgl_sphereWithEquator.html" frameborder="0" scrolling="no" width="100%" height="512" align="left">
    </iframe>
  </div>
  <div>
    <iframe src="webgl_hopftorus1.html" frameborder="0" scrolling="no" width="100%" height="512" align="right">
    </iframe>
  </div>
</div>

<div class="box">
  <div>
    <iframe src="webgl_sphereWithSlopedEquator.html" frameborder="0" scrolling="no" width="100%" height="512" align="left">
    </iframe>
  </div>
  <div>
    <iframe src="webgl_hopftorus2.html" frameborder="0" scrolling="no" width="100%" height="512" align="right">
    </iframe>
  </div>
</div>

Hope this helps.

Upvotes: 1

PatTastic
PatTastic

Reputation: 114

The most simple way would be to replace the float: left style with display: inline-block. Doing it this way, you could also get rid of the .clear class as well. What float is doing is it's getting rid of any proper "breaking" and making all elements "float", whether they belong there or not.

Also, I'd suggest changing your <p> tags to <div>, since they're acting as dividers anyway.

Edited CSS:

<style type="text/css">
    .box {
        display: inline-block;
        margin-right: 20px;
    }
</style>

Upvotes: 1

Ralph Mirasol
Ralph Mirasol

Reputation: 137

Using Float and Width

CSS code

.box {
    float:left;
    width: 50%;
}
iframe {
    width:100%;
}

HTML code

<div class="box">
    <iframe src="https://www.google.com"></iframe>
</div>
<div class="box">
    <iframe src="https://www.google.com"></iframe>
</div>
<div class="box">
    <iframe src="https://www.google.com"></iframe>
</div>
<div class="box">
    <iframe src="https://www.google.com"></iframe>
</div>

Upvotes: 1

Related Questions