How Do I Get iFrames Side-by-Side?

Question

I need to pull a web page into our vBulletin site webpage to inform our community about our servers status. Basically, I need to use iFrames. I have them in there but I cant get them side by side.

I've hunted all over the internet and all the comments I have read do not do it. Here is the code I have to work with:

<center>
<iframe src="http://cache.www.gametracker.com/components/html0/?host=63.251.20.99:6820&bgColor=16100D&fontColor=B9946D&titleBgColor=150C08&titleColor=B9946D&borderColor=000000&linkColor=FFFF99&borderLinkColor=FFFFFF&showMap=0&currentPlayersHeight=350&showCurrPlayers=1&showTopPlayers=0&showBlogs=0&width=180" frameborder="0" scrolling="no" width="100%" height="512">
</iframe>
<iframe src="http://cache.www.gametracker.com/components/html0/?host=74.91.116.62:27015&bgColor=16100D&fontColor=B9946D&titleBgColor=150C08&titleColor=B9946D&borderColor=000000&linkColor=FFFF99&borderLinkColor=FFFFFF&showMap=1&currentPlayersHeight=200&showCurrPlayers=1&showTopPlayers=0&showBlogs=0&width=180" frameborder="0" scrolling="no" width="100%" height="512">
</iframe>
<iframe src="http://cache.www.gametracker.com/components/html0/?host=70.42.74.135:27015&bgColor=16100D&fontColor=B9946D&titleBgColor=150C08&titleColor=B9946D&borderColor=000000&linkColor=FFFF99&borderLinkColor=FFFFFF&showMap=1&currentPlayersHeight=200&showCurrPlayers=1&showTopPlayers=0&showBlogs=0&width=180" frameborder="0" scrolling="no" width="100%" height="512">
</iframe>
</center>

Need to adjust the iframes side by side with each other. Any help would be greatly appreciated.

Answer 1

Hi are you looking for something like this.

http://jsfiddle.net/DJpSN/

CSS

.box{
    width:200px;
    float:left; 
}

HTML

<div class="box">
   <iframe src="http://cache.www.gametracker.com/components/html0/?host=63.251.20.99:6820&bgColor=16100D&fontColor=B9946D&titleBgColor=150C08&titleColor=B9946D&borderColor=000000&linkColor=FFFF99&borderLinkColor=FFFFFF&showMap=0&currentPlayersHeight=350&showCurrPlayers=1&showTopPlayers=0&showBlogs=0&width=180" frameborder="0" scrolling="no" width="100%" height="512">
  </iframe>
</div>

<div class="box">
   <iframe src="http://cache.www.gametracker.com/components/html0/?host=74.91.116.62:27015&bgColor=16100D&fontColor=B9946D&titleBgColor=150C08&titleColor=B9946D&borderColor=000000&linkColor=FFFF99&borderLinkColor=FFFFFF&showMap=1&currentPlayersHeight=200&showCurrPlayers=1&showTopPlayers=0&showBlogs=0&width=180" frameborder="0" scrolling="no" width="100%" height="512">
    </iframe>
</div>

<div class="box">
  <iframe src="http://cache.www.gametracker.com/components/html0/?host=70.42.74.135:27015&bgColor=16100D&fontColor=B9946D&titleBgColor=150C08&titleColor=B9946D&borderColor=000000&linkColor=FFFF99&borderLinkColor=FFFFFF&showMap=1&currentPlayersHeight=200&showCurrPlayers=1&showTopPlayers=0&showBlogs=0&width=180" frameborder="0" scrolling="no" width="100%" height="512">
  </iframe>
</div>

**UPDATE**

The alternative 'NO CSS' way is adding the align property.

BUT, A warning the iframe align attribute is not supported in HTML5. So use CSS instead would be the right way. That being said the align attribute is deprecated, but still supported in all major browsers.

Below is a jsFiddle demoing the align attribute.

http://jsfiddle.net/DJpSN/20/

For further reading on the align attribute have a look at w3schools

Another way you can uses css would be inline

Once more a jsFiddle, but demoing inline CSS http://jsfiddle.net/DJpSN/21/