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_frame and #right_frame that 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:
#left_frame,
#right_frame {
float: left;
}
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:
#left_frame,
#right_frame {
float: left;
border: none;
}
OR, you can subtract the border from the widths. I would recommend this.
#left_frame,
#right_frame {
float: left;
}
#left_frame {
width: calc(25% - 4px);
}
#right_frame {
width: calc(75% - 4px);
}
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 the calc statements. That would look like:
#left_frame,
#right_frame {
float: left;
}
iframe {
box-sizing: border-box;
}
Updated fiddle to fix the spacing issue to the right of right_frame
http://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/
<iframe id="top_frame" src=""></iframe>
<div id="middle-row">
<iframe id="left_frame" src=""></iframe>
<iframe id="right_frame" src=""></iframe>
</div>
<iframe id="bottom_frame" src=""></iframe>
iframe {
box-sizing: border-box;
}
#middle-row {
display: flex;
}
Browser support is pretty good, though it's not gonna work on IE6.
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:
#top_frame {
width: 100%;
}
#left_frame {
float: left;
width: 25%;
}
#right_frame {
width: 75%;
}
#bottom_frame {
width: 100%;
}
iframe {
box-sizing: border-box;
}
A few changes to your HTML and CSS will allow you to do this by using table display styles with some divs.
http://jsfiddle.net/mwg3j17d/6/
<body>
<iframe id="top_frame" src=""></iframe>
<div class="cols">
<div class="col-left">
<iframe id="left_frame" src=""></iframe>
</div>
<div class="col-right">
<iframe id="right_frame" src=""></iframe>
</div>
</div>
<iframe id="bottom_frame" src=""></iframe>
</body>
#top_frame {
width: 100%;
}
#left_frame {
width: 100%;
}
#right_frame {
width: 100%;
}
#bottom_frame {
width: 100%;
}
.cols {
display: table-row;
}
.col-left, .col-right {
display: table-cell;
}
.col-left {
width: 25%;
}
.col-right {
width: 75%;
}
You could also do it with a table itself.
