I want to place 2 pictures, one on top of the page and the other right below it. Then, I want to write something about each picture and I want the text to be located to the right of each picture.
How can this be done?
I am formatting my pictures as following, but the problem is that the pictures are like they were suppose to, but the text appear to be only by first image.
<p style="float: left; clear: left"><img src="image.jpg" height="200px" width="200px" border="1px"></p>
<p>Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text</p>
<p style="float: left; clear: left"><img src="image.jpg" height="200" width="200" border="1px"></p>
<p>Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text</p>
Using the float property of CSS will allow you to place an image and text on the same line without breaking the line break. Or Alternatively, you should use the flexbox method of CSS that uses the flex property to make sure that images and lines are aligned in the same line.
CSS position property is used to set the position of text over an image. This can be done by enclosing the image and text in an HTML “div”. Then make the position of div “relative” and that of text “absolute”. The absolute elements are positioned relative to their parent (div).
Put the image's maximum width to 100% with the max-width property. Set the flex-basis property of the "image" class to specify the initial main size of your image. Choose the font size of your text with the help of the font-size property. Use the padding-left property to set the padding space on the text's left side.
Just use some wrapper divs like this:
<div>
<p style="float: left;"><img src="http://placekitten.com/g/200/200" height="200px" width="200px" border="1px"></p>
<p>Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text</p>
</div>
<div style="clear: left;">
<p style="float: left;"><img src="http://placekitten.com/g/200/200" height="200" width="200" border="1px"></p>
<p>Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text</p>
</div>
jsFiddle example
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