Menu
I would like to achieve the following placement:
Two different texts (in block) floating / inline next to image. (Everything inside div).
I have been trying with different display settings (block + inline for text etc.) but it is still not working.
HTML:
<div class="res"> <img src="<?php echo 'img/'.$row["sType"].'.png';?>"/> <span>TITLEe</span> <span>Description</span> </div> CSS:
.res { height:60px; background-color:yellow; border-bottom:1px solid black; text-align:left; } .res img { margin-top:8.5px; margin-left:5px; display:inline } .res span { display:block; } 
859
in order to have text on the left or right of the image you can style your img as style="float:left"; or style="float:right"; If the text is too close to the image you can play with padding: 10px; or less.
Use display: inline-block and vertical-align: top to Place the Text Next to an Image in HTML. We can use the display and vertical-align properties to place a text next to an image in HTML. The display defines how an element displays in HTML.
This is achieved with the CSS property float, which allows text to flow around the left-aligned image to its right side (or around a right-aligned image to its left side).
.content { width: 400px; border: 4px solid red; padding: 20px; overflow: hidden; } .content img { margin-right: 15px; float: left; } .content h3, .content p{ margin-left: 15px; display: block; margin: 2px 0 0 0; }<div class="content"> <img src="http://cdn4.iconfinder.com/data/icons/socialmediaicons_v120/48/google.png"/ alt="" > <h3>Title</h3> <p>Some Description</p> </div>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
