Add Text Beside Image

Question

User974100899 posted

Hiya,

I want to have an image on the left, and have two rows of text directly to the right of the image that span to the end of the page. This is an image of what I am after. How do I achieve this with HTML/CSS?

https://ibb.co/6rXPVJK

Answer 1

User475983607 posted

There's probably an unlimited number of ways to accomplish this requirement but a table is pretty simple.

https://www.w3schools.com/tags/att_td_rowspan.asp

    <table border="1">
        <tr>
            <th>Image</th>
            <th>Content</th>
        </tr>
        <tr>
            <td rowspan="2">Image</td>
            <td>Line 1</td>
        </tr>
        <tr>
            <td>Line 2</td>
        </tr>
    </table>

Answer 2

User974100899 posted

I am currently adding the image like this...how would I implement this into the table? 

<img style="width: 320px; height: 320px;" alt="Kang Logo" src="file:///Users/owner/Downloads/Images/Logo.jpg">

Answer 3

User475983607 posted

I am currently adding the image like this...how would I implement this into the table? 

<img style="width: 320px; height: 320px;" alt="Kang Logo" src="file:///Users/owner/Downloads/Images/Logo.jpg">

My first post has a table example along with a link that is a bit more detailed.

    <table border="1">
        <tr>
            <th>Image</th>
            <th>Content</th>
        </tr>
        <tr>
            <td rowspan="2"><img style="width: 320px; height: 320px;" alt="Kang Logo" src="file:///Users/owner/Downloads/Images/Logo.jpg"></td>
            <td>Line 1</td>
        </tr>
        <tr>
            <td>Line 2</td>
        </tr>
    </table>

Keep in mind this construct...

src="file:///Users/owner/Downloads/Images/Logo.jpg"

will not work on a once deployed to a web server.  

The image needs to be located on the web server.  A hosted image is easier to handle but you can serialize an image that is outside the web app.  There are tons of examples of both approaches.

Hosted approach.

https://www.w3schools.com/tags/tag_img.asp

https://www.w3schools.com/html/html_filepaths.asp

Answer 4

User974100899 posted

Is there a way to "column 2" expand the width of the screen?

I tried this, but the text is not centering.

<table style="margin: 0px;">
  <tbody>
    <tr>
      <td rowspan="2"><img style="width: 320px; height: 320px;"
        alt="Kang Logo"
        src="file:///Users/owner/Downloads/Images/Logo.jpg"></td>
      <td align="center"><b>Kang Information SEminar</b></td>
    </tr>
  </tbody>
</table>

Answer 5

User71929859 posted

Is there a way to "column 2" expand the width of the screen?

Yes. Set width: 100%

<td align="center"><b>Kang Information SEminar</b></td>

Don't use align attribute. It's obsolete. Use text-align css instead. Like below

<td style="text-align: center; width: 100%"><b>Kang Information SEminar</b></td>

Also, as above user mentioned, don't use absolute paths in a web application. Add the Logo to your solution and refer it with the relative path. Something like below

<img src="../../Images/Logo.jpg" style="width: 320px; height: 320px;"
                 alt="Kang Logo" />

Answer 6

User-1174608757 posted

Hi LiarLiarPantsOnFire;

According to your description,do you notice that there's white space between image and td if you just use code as you provided? I suggest that you should add style as block to remove the white space.

You could write as below:

  <table border="1">
        
        <tr>
            <td rowspan="2"><img style="width: 320px;display:block ; height: 320px;" alt="Kang Logo" src="d11.jpg" /></td>
            <td style="text-align: center; width: 100%"><b>Kang Information SEminar</b></td>
        </tr>
        <tr>
            <td>Line 2</td>
        </tr>
    </table>

Best Regards

Wei

Answer 7

User974100899 posted

Some strange reason this is an issue with KompoZer...if I create a text file with the syntax and save it as a .html it displays as I desfire.