Monday, July 26, 2010

HTML/ CSS Text and Image side by side

By SourceTricks 9:00 PM css, html, image and text side by side 1 comment

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>.