{var%20f='http://v.t.sina.com.cn/share/share.php?appkey=1515056452',u=z||d.location,p=['&url=',e(u),'&title=',e(t||d.title),'&source=',e(r),'&sourceUrl=',e(l),'&content=',c||'gb2312','&pic=',e(p||'')].join('');function%20a(){if(!window.open([f,p].join(''),'mb',['toolbar=0,status=0,resizable=1,width=440,height=430,left=',(s.width-440)/2,',top=',(s.height-430)/2].join('')))u.href=[f,p].join('');};if(/Firefox/.test(navigator.userAgent))setTimeout(a,0);else%20a();})(screen,document,encodeURIComponent,'','','https://www.manongdao.com/data/attach/logo/logo.png', '推荐 傲 的问题《Why cant I have 2 iframes side by side with total》','https://www.manongdao.com/q-934983.html','页面编码gb2312|utf-8默认gb2312'));){kind=link}
I have total 4 iframe.
<body>
<iframe id="top_frame" src=""></iframe>
<iframe id="left_frame" src=""></iframe>
<iframe id="right_frame" src=""></iframe>
<iframe id="bottom_frame" src=""></iframe>
</body>
I want 2 of them left_frame and right_frame side by side with their total width 100% (25% for left_frame and 75% for right_frame).
So I put this CSS:
#top_frame {
width: 100%;
}
#left_frame {
width: 25%;
}
#right_frame {
width: 75%;
}
#bottom_frame {
width: 100%;
}
But it did not work as you can see in this JSFiddle http://jsfiddle.net/srhcan/mwg3j17d/1/
If I decrease the width of right_frame to 73% then they will show side by side but will leave bit space on the right side.
What is the reason of this?
How can I have 2 iframes side by side with total width 100%?
First off, you need to tell the
#left_frameand#right_framethat you want them to be next to each other.You can do this a few different ways, but one of the most popular is floating them:
Now, this works, but you still won't see them next to each other. That's because they have an inherent 2px border by default.
Therefore, you can either remove the border:
OR, you can subtract the border from the widths. I would recommend this.
Link to your updated fiddle: http://jsfiddle.net/mwg3j17d/4/
EDIT - As pointed out by @Rob Scott, you can add
box-sizing: border-box;to the iframes to not have to use thecalcstatements. That would look like:Updated fiddle to fix the spacing issue to the right of
right_framehttp://jsfiddle.net/mwg3j17d/12/To answer your actual question of why:
Even without the borders, you still have a space between the two iframes. 25% + 75% + four borders + the size of the space is going to be more than 100%, so the second one has to wrap to a new line.
The simplest way to do this nowadays, and the way least likely to wreak havoc or fall apart on you, is to use flexbox, which is a pretty flexible way of stuffing some number of boxes in a row or column:
http://jsfiddle.net/mwg3j17d/10/
Browser support is pretty good, though it's not gonna work on IE6.
A few changes to your HTML and CSS will allow you to do this by using table
displaystyles with some divs.http://jsfiddle.net/mwg3j17d/6/
You could also do it with a table itself.
Your iframes have a 2px border on them by default which is not included in the width of the box. You can remove this border with css using
border: 0px, or include it in the width calculation using `box-sizing: border-box;' as Rob Scott mentioned. This will allow you to have their widths add to 100%. can place them side by side, by floating one left.Updated Fiddle
CSS: