Tuesday, July 27, 2010

HTML/ CSS Text and Image side by side

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.

5 comments:

 

© 2013, 2014 Programming Tutorials by SourceTricks. All rights resevered. Designed by Templateism

Back To Top