CODEWITHSUNDEEP
htmlcssiframewidth
CBrown77
CBrown77

Reputation: 557

How can I make two iframes fit the width of the page?

My issue is that I have two iframes on the page, one for a persistent side menu and one for main body content. I want the side menu to take up roughly 12% of the screen (just personal choice) and then the content to fit the rest of the page width. I've seen many solutions for fitting a single iframe onto a page but I cannot find anything to help my specific issue exactly.

I tried setting the bodyContent iframe's width to 88% so that 88 + 12 = 100, but this makes the iframe appear below the menu iframe. I guess 100% is too wide for the page in this case...? My rudimentary solution was to set the width of bodyContent to the 87.6% (87.7% was too much) so that it just fits the full width of the page with a tiny sliver of white along the right border.

I know there must be a more simple solution to this problem so that the two iframe's can cleanly fit the full width of the page. How could I go about doing so?

Here's what I have right now (the iframe's sources are .aspx files which I have hidden):

<!DOCTYPE html>
<html>
    <head>
        <title>Foo</title>
        <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
        <meta http-equiv="content-language" content="en-us" />      

        <style>
            .menu {
                float: left;
                width: 12%;
            }
            .bodyContent {
                float: left;
                width: 87.6%;
                border: none;
            }
            body {
                margin: 0;
                padding: 0;
            }
            div#root {
                position: fixed;
                width: 100%;
                height: 100%;
            }
            div#root > iframe {
                height: 100%;
            }
        </style>      
    </head>     

    <body>
        <div id="root">
            <iframe class="menu" src="hidden"></iframe>
            <iframe class="bodyContent" src="hidden"></iframe>
        </div>
    </body>
</html>

Upvotes: 1

Views: 885

Answers (2)

Brino
Brino

Reputation: 2502

Your iFrame width does not include the border by default. Your border is 2px wide by default. To include it, add the box-sizing: border-box; css style to include the border in your iframe width.

JSFIDDLE

iframe {
    box-sizing: border-box; /*include borders in the width calculation */
}
.menu {
    float: left;
    width: 12%;
}
.bodyContent {
    float: left;
    width: 88%; /*width can now be 88%*/
    /*border: none; removed so you can see the iframe in this example*/
}

Here is a similar Question and Solution

Upvotes: 1

gopalraju
gopalraju

Reputation: 2309

div#root > iframe {
       height: 100%;
       float:left;
       box-sizing:border-box;
   }

http://jsfiddle.net/x2co8yrs/2/

Upvotes: 1

Related Questions