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&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 adjust iframes side side each other. appreciated.

hi looking 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 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.

http://jsfiddle.net/djpsn/20/

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

Popular posts from this blog

java - activate/deactivate sonar maven plugin by profile? -

python - TypeError: can only concatenate tuple (not "float") to tuple -

java - What is the difference between String. and String.this. ? -