Tuesday, July 27, 2010

This code snippet provides a CSS and HTML to place image and text side by side in a HTML page.
The CSS.
.mydiv {background: lightblue; width:250px; height: 250px;}

.myimage {float:left; width:100px; height:150px; margin:5px;}
The HTML.
<html>

    <head>

        <link rel='stylesheet' href="testme.css">

    </head>

    <body>

    <div class="mydiv">

        <img class="myimage" src="testme.jpg"/>

        Hi. Image with text on the same line.

        Hi. Image with text on the same line.

        Hi. Image with text on the same line.

        Hi. Image with text on the same line.

        Hi. Image with text on the same line.

        Hi. Image with text on the same line.

        Hi. Image with text on the same line.

        Hi. Image with text on the same line.

    </div>

    </body>

</html>
The output.

Trending