Image and text placement

  • 2
  • Question
  • Updated 10 years ago
  • Answered
I have used the text widget to place an image on my page running down the left side. What I cannot figure out is: How do i add text to the immediate right of this image, and then add another image to the right of the text? I want image>text>image running straight across the page.

BTW: Awesome site, im learning alot, but have long ways to go!
Photo of greenweb2

greenweb2

  • 4 Posts
  • 1 Reply Like

Posted 10 years ago

  • 2
Photo of Marije

Marije, Official Rep

  • 4636 Posts
  • 237 Reply Likes
You can place an image and text side by side as follows:
1) Click on your text box and then click on the HTML icon (the last icon on the text editing toolbar.
2) This will open up the HTML code view of your text. Look for the original image tag that looks like this:
<!-- <img src="resources/picture.jpg"> -->
3) Edit it as follows:
<!-- <img style="float: left;" src="resources/picture.jpg"> -->

Please ignore <!-- and --> they are used to stop this post from interpreting the code.
Photo of greenweb2

greenweb2

  • 4 Posts
  • 1 Reply Like
Maybe I am missing something here, but your code moves my img. to the left. I already have that. I cannot figure out how to type text to the immediate left of that img. My img. on the left is 300px long, but when I go to add text, the cursor shows up at the bottom right of the img. Is this process going to be fully HTML?
Photo of Marije

Marije, Official Rep

  • 4636 Posts
  • 237 Reply Likes
You can edit the code to say left or right according to what you would like to do. There could be line-breaks (equivalent of hitting enter) in the HTML forcing the text to appear further down. Another alternative is to use a two-column widget to have the text and image on the same line - see pic below. This way you don't need to edit the HTML.

Photo of Ruth

Ruth

  • 2819 Posts
  • 135 Reply Likes
Hi,

This is another option that may like to try:

1) Drag and drop a two column layout widget onto your page.
2) Drop another two column layout widget inside it.
3)Drag the green center axis to resize the columns to the desired width.
4) Drop additional widgets inside the columns to add content.

See screenshot below for an example: