Place Image and Table side by side HTML with ratio of 50-50

StackOverflow https://stackoverflow.com/questions/22449806

Question

I would like clarify if there is a way to place an image on the left side while an HTML table on the right side of the page. I.e. these two are to exist side-by-side in 50-50 ratio.

Currently, I am generating a jFreeChart and putting it in as an image in a html file. (see img_1 below)

Separately I am generating a html table with values (see Table_1 below). The code I am currently using to place these side by side looks like this (it does the job, but the ratio is not 50-50.. how can I ensure this?)

P.S. : I've tried div, but it doesn't seem to work for me. My code stops working. So I'm posting what works till this point. 

<tr>
    <td width="51">
        <img src="spacer.gif" width="1" height="1" border="0">
    </td>
    <td style="font-size:16px;color: #00386b; font-weight:bold; text-align:left">
        TITLE
    </td>
    <td width="5">
        <img src="spacer.gif" width="1" height="1" border="0">
    </td>
    <td style="font-size:16px;color: #00386b; font-weight:bold; text-align:left">
        TITLE
    </td>
    <td width="25">
        <img src="spacer.gif" width="1" height="1" border="0">
    </td>
</tr>
<!-- start spacer row -->
<tr>
    <td height="15" colspan="5">
        <img src="spacer.gif" width="1" height="1" border="0">
    </td>
</tr>
<!-- end spacer row -->
<tr>  
    <td width="51">  ---LEFT SIDE
        <img src="spacer.gif" width="1" height="1" border="0">
    </td>
    <td style="text-align:center; vertical-align:top">

        <img SRC="cid:img_1" width="250" height="250" border="0">

    </td>
    <td width="5">  -RIGHT SIDE
        <img src="spacer.gif" width="1" height="1" border="0">
    </td>
    <td style="text-align:left; vertical-align:top">

        TABLE_1

    </td>
    <td width="25">
        <img src="spacer.gif" width="1" height="1" border="0">
    </td>

    <td width="25">
        <img src="spacer.gif" width="1" height="1" border="0">
    </td>
</tr>
</tr>
Was it helpful?

Solution

You can use width:50%, like this:

#one{
    width:50%;
    float:left;
    height:100px;
}

#two{
    width:50%;
    float:left;
    height:100px;
}

td, tr, table{
    border:1px solid black; // visual
    text-align:center; // text's also centered, if required
}

Demo

It is responsive also, so it readjusts on window resize.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top