Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to place Text and an Image next to each other in HTML?

Tags:

html

text

css

image

I want the text and the image to be next to each other but I want the image to be on the far left of the screen and I want the text to be on the far right of the screen. This is what I currently have....

<body> <img src="website_art.png" height= "75" width= "235"/> <h3><font face="Verdana">The Art of Gaming</font></h3> </body> 

How can I do this?

Thanks

like image 990
user2426533 Avatar asked Jun 20 '13 17:06

user2426533


People also ask

How do I put text and images side by side in HTML?

Use the float CSS Property to Place the Text Next to an Image in HTML. We can use the float CSS property to define how an element can float. An element can float to the right or the left. Some other options are none which means the element will not float and, inherit which, will exhibit its parent's behavior.

How do I put text next to a picture in HTML?

Create HTML Put three <div> elements and give them “container”, “image” and “text” class names. Put your image within the second <div> element with the help of the <img> tag and its src attribute. Add some text in the <h1> element.

How do I put text and image on the same line in HTML?

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.


1 Answers

img {     float:left; } h3 {     float:right; } 

jsFiddle example

Note that you will probably want to use the style clear:both on whatever elements comes after the code you provided so that it doesn't slide up directly beneath the floated elements.

like image 148
j08691 Avatar answered Sep 28 '22 07:09

j08691