CODEWITHSUNDEEP
htmlcssiframe
maxpesa
maxpesa

Reputation: 185

iframe float both top and right

I'm making a little html page to include in my sister's "presentation" (school). I've created a table which includes several rows and the first column has a link whose target="ifr", the iframe. These links include an explanation of the element.

I want to include that iframe on the right side to make the page more fancy, but I'm getting troubles, trying to make the iframe floating both right and up.

iframe code:

    <iframe style="float:right;" width="575px" height="800px" id="ifr" name="ifr" src="no-src.html"></iframe>

table:

<table border=1 bordercolor="#000000" cellpadding=15 cellspacing=0>

<tr valign=top> <!-- category-->
    <td align="center">
        <FONT COLOR="#800000" FACE="TimesNewRomanPSMT, sans-serif" SIZE=3><B>Denominazione</B></FONT>
    </td>
    <td align="center">
        <FONT COLOR="#800000" FACE="TimesNewRomanPSMT, sans-serif" SIZE=3><B>Gene</B></FONT>
    </td>
    <td align="center">
        <FONT COLOR="#800000" FACE="TimesNewRomanPSMT, sans-serif" SIZE=3><B>Origine</B></FONT>
    </td>
</tr>
<tr valign=top> <!-- first row, there are 12 of these-->
    <td><a href="pc.html" target="ifr">Paramiotonia congenita (PC)</a></td>
    <td align="center">17q23</td>
    <td>Ereditarietà autosomica dominante</td>
</tr>

Here's what I get:what i get

And here's what i want:what i want

I thought to make them part of an <ul> and use display:inline, but I've got only some bases of html/css. Thanks in advance

Upvotes: 0

Views: 722

Answers (1)

4dgaurav
4dgaurav

Reputation: 11496

Demo, also a fullscreen result Demo

Updated : removed non html5 valign

I suggest not to use <font> its quite old way, instead style by css.

html

<table border=1 bordercolor="#000000" cellpadding=15 cellspacing=0>
    <tr>
        <!-- category-->
        <td align="center">Denominazione</td>
        <td align="center">Gene</td>
        <td align="center">Origine</td>
    </tr>
    <tr>
        <!-- first row, there are 12 of these-->
        <td><a href="pc.html" target="ifr">Paramiotonia congenita (PC)</a>
        </td>
        <td align="center">17q23</td>
        <td>Ereditarietà autosomica dominante</td>
    </tr>
    <tr>
        <!-- first row, there are 12 of these-->
        <td><a href="pc.html" target="ifr">Paramiotonia congenita (PC)</a>
        </td>
        <td align="center">17q23</td>
        <td>Ereditarietà autosomica dominante</td>
    </tr>
    <tr>
        <!-- first row, there are 12 of these-->
        <td><a href="pc.html" target="ifr">Paramiotonia congenita (PC)</a>
        </td>
        <td align="center">17q23</td>
        <td>Ereditarietà autosomica dominante</td>
    </tr>
    <tr>
        <!-- first row, there are 12 of these-->
        <td><a href="pc.html" target="ifr">Paramiotonia congenita (PC)</a>
        </td>
        <td align="center">17q23</td>
        <td>Ereditarietà autosomica dominante</td>
    </tr>
    <tr>
        <!-- first row, there are 12 of these-->
        <td><a href="pc.html" target="ifr">Paramiotonia congenita (PC)</a>
        </td>
        <td align="center">17q23</td>
        <td>Ereditarietà autosomica dominante</td>
    </tr>
    <tr>
        <!-- first row, there are 12 of these-->
        <td><a href="pc.html" target="ifr">Paramiotonia congenita (PC)</a>
        </td>
        <td align="center">17q23</td>
        <td>Ereditarietà autosomica dominante</td>
    </tr>
    <tr>
        <!-- first row, there are 12 of these-->
        <td><a href="pc.html" target="ifr">Paramiotonia congenita (PC)</a>
        </td>
        <td align="center">17q23</td>
        <td>Ereditarietà autosomica dominante</td>
    </tr>
    <tr>
        <!-- first row, there are 12 of these-->
        <td><a href="pc.html" target="ifr">Paramiotonia congenita (PC)</a>
        </td>
        <td align="center">17q23</td>
        <td>Ereditarietà autosomica dominante</td>
    </tr>
</table>
<iframe style="float:right;" width="575px" height="800px" id="ifr" name="ifr" src="no-src.html"></iframe>

css

td {
    color:#800000;
    font-family:"TimesNewRomanPSMT, sans-serif";
    font-size: 14px;
}
tr {
    vertical-align: top; /* valign=top is not used now */
}
table {
    width: calc(100% - 580px); /* negate the width of iframe also borders */
    float: left;
}

Upvotes: 2

Related Questions