Home/ Questions/Q 552699
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-13T11:31:39+00:00

I am trying to align an image and some text together. If you refer

  • 0

I am trying to align an image and some text together. If you refer the below code there will be and image and some text( Name and Age) I want both of them to be next to each other. I did try float: left but still no luck.

Thanks 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns='http://www.w3.org/1999/xhtml' xml:lang='en'>
    <head>
        <meta http-equiv='Content-Type' content='text/html; charset=UTF-8' />
        <title></title>
    <style>
        img {
            height: 10px;
            width: 20px;

        }
        ul li{


            display:block;
        }
        ul {
            margin: 0;
            float: left;
        }
        #container {
            margin: 10px

        }
    </style>

    </head>
    <body>
    <div id="container">
    <p>
    <img src="cat.jpg"> <ul><li>Source</li><li>Item Link Title</li> </ul> </p>
    </div>
    </body>
</html>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Technically your HTML is invalid. A list is a block level element and you can’t (or shouldn’t) embed then in paragraphs since they should only take inline elements.

    There is no Name and Age mentioned anywhere in your markup so I’m not sure what you’re referring to there.

    Edit: to put the image on the left and have the two labels on the right one above the other, use this markup:

    <div id="container">
<img src="cat.jpg">
<ul>
  <li>Source</li>
  <li>Item Link Title</li>
</ul>
</div>

    and either this CSS:

    html, body, div, ul, li, img { padding: 0; margin: 0; border: 0 none; }
#container { background: yellow; overflow: hidden; float: left; }
#container img { float: left; }
#container ul { list-style-type: none; float: left; background: green; }

    The float: left on the container is optional. It simply means that it isn’t as wide as its container. The first line is a crude reset CSS. I’d suggest using a real CSS and a DOCTYPE always.

    • 0