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