Skip to content
← Back to Community
HTML Image next to text
Profile icon
SamKunefeh

Hello everyone, I recently started learning html and css and want to build a website where for the main content, there is an image next to some text. Like so:

Image and text

So is there any way I can achieve this? Also, I heard people use things like flexbox, grid, floats and what not, but what are they really and can they efficiently be used for the layout I am trying to make?

As the proverb goes:

Give a man a fish, and you feed him for a day. Teach that man how to fish, and > you feed him for a lifetime.
So please try to explain me how the solution works instead of just code-feeding me.

Answered by InvisibleOne [earned 5 cycles]
View Answer
Voters
Profile icon
SamKunefeh
Comments
hotnewtop
Profile icon
InvisibleOne

There are two ways you can do this

Number 1

Make their position fixed and then set the image to have a left of 20px and a width of 400px, and then the text to have a left of 430px, you may also need to make them display as an inline-block

Number 2

Or you can just make them both display as an inline-block and set the verticle-align to top and as long as the screen is wide enough they'll display next to each other.

Profile icon
InvisibleOne
Profile icon
SamKunefeh

@InvisibleOne But what do height: auto; and display: inline-block; mean?

Profile icon
InvisibleOne

Since the image isn't sqare I put height: auto; so that it would automatically choose the height and not warp the image. display sets how the item is displayed, the default is block but inline-block let's them line up next to each other @Jackbaklava

Profile icon
SamKunefeh

@InvisibleOne Ok, thanks for the help!

Profile icon
InvisibleOne