css - How Do I Get iFrames Side-by-Side? -
i need pull web page our vbulletin site webpage inform our community our servers status. basically, need use iframes. have them in there cant them side side.
i've hunted on internet , comments have read not it. here code have 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¤tplayersheight=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¤tplayersheight=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¤tplayersheight=200&showcurrplayers=1&showtopplayers=0&showblogs=0&width=180" frameborder="0" scrolling="no" width="100%" height="512"> </iframe> </center>
need adjust iframes side side each other. appreciated.
hi looking this.
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¤tplayersheight=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¤tplayersheight=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¤tplayersheight=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 adding align property.
but, warning iframe align attribute not supported in html5. use css instead right way. being said align attribute deprecated, still supported in major browsers.
below jsfiddle demoing align attribute.
for further reading on align attribute have @ w3schools
another way can uses css inline
once more jsfiddle, demoing inline css http://jsfiddle.net/djpsn/21/
Comments
Post a Comment