Float text to right of image, NOT wrap around though?

  • 1
  • Question
  • Updated 8 years ago
  • Answered
Suppose I have a one column layout. In that column, I have a text box with a paragraph or so of text. To the left of that text, I want to have a photo (in the text box, not a separate photo widget), but I don't want the text to wrap around the photo. I want the text to ALL stay to the right of that photo and the photo should center vertically alongside the block of text. This will give the appearance of having two physical columns even though there's only one. Does it make sense what I'm saying? I suppose that this will be some inline CSS rules for the img tag, but I'm not sure what those rules should be.. Can anyone help?
Photo of Mike C

Mike C

  • 86 Posts
  • 1 Reply Like

Posted 8 years ago

  • 1
Photo of Nathan

Nathan, Champion

  • 3739 Posts
  • 307 Reply Likes
Hi Mike, you can use CSS for this. But, what exactly do you want? Do you want the text to be at the right of the image? And stay there? You could use the column divider so the text can be to the right and the picture to the left. Here is an example I made with the column divider: Divider example
Photo of Mike C

Mike C

  • 86 Posts
  • 1 Reply Like
Yes that's what I want, but I don't want to use physical columns because I'm going to have many pictures and text blocks and I may want to move them around in the future. It's better to have one text box, with the image in it. And the problem is that the amount of text makes the text block taller than the photo, so if you simply left align it, the text will wrap under the photo when it's able to. I want the text block to stay to the right, and I want the image centered vertically, or in the middle of the text block if that makes sense haha
Photo of Mike C

Mike C

  • 86 Posts
  • 1 Reply Like
I'm annoyed too with this new preview, because I can't give you a link to see it like I could before they changed it..
Photo of Mike C

Mike C

  • 86 Posts
  • 1 Reply Like
I found all this:
http://www.maxdesign.com.au/articles/...
but it's not helping me. I'm ready to give up
Photo of Nathan

Nathan, Champion

  • 3739 Posts
  • 307 Reply Likes
Hi, I am writing a reply right now, just give me 10 minutes.
Photo of diane

diane

  • 1238 Posts
  • 121 Reply Likes
Hi, Mike,

You might try this site: http://html101.yolasite.com/
It has a number of variables for adding an image and aligning text.
Photo of Mike C

Mike C

  • 86 Posts
  • 1 Reply Like
Error 503 Service Unavailable

Service Unavailable
Photo of Nathan

Nathan, Champion

  • 3739 Posts
  • 307 Reply Likes
I got to that website. Hey Mike, I am creating a table page right now and writing a reply, sorry for the long wait!
Photo of Mike C

Mike C

  • 86 Posts
  • 1 Reply Like
table page? You don't mean html tables do you? I hope not because those are messy. I just want to have everything contained in a text widget, image aligned to the left, away from the text, no wrap. I can halfway do it with padding-right, but it's not really good. There has to be a way
Photo of diane

diane

  • 1238 Posts
  • 121 Reply Likes
The html101 site comes up for me. Can you try clearing your cache and see if that helps?
Photo of Mike C

Mike C

  • 86 Posts
  • 1 Reply Like
Yes it came up for me too after a few minutes, but it is not helpful for me
Photo of Nathan

Nathan, Champion

  • 3739 Posts
  • 307 Reply Likes
<!--
You could use Tables for it. I already have the code st up for you and I created an example page. Here is a code:

<table border="0">
<tr>
<td width="200px">
<a href="img-1.jpg" rel="lightbox" title="My caption"><img src="img-1.jpg" width="70px"></a>
</td>
<td width="200px">
<a href="img-1.jpg" rel="lightbox" title="My caption"><img src="img-1.jpg" width="80px"></a>
</td>
<td width="200px">
<a href="img-1.jpg" rel="lightbox" title="My caption"><img src="img-1.jpg" width="80px"></a>
</td>
<td width="200px">
<a href="img-1.jpg" rel="lightbox" title="My caption"><img src="img-1.jpg" width="80px"></a>
</td>
</tr>
<tr>
<td width="200px">
<a href="img-1.jpg" rel="lightbox" title="My caption"><img src="img-1.jpg" width="70px"></a>
</td>
<td width="200px">
<a href="img-1.jpg" rel="lightbox" title="My caption"><img src="img-1.jpg" width="80px"></a>
</td>
<td width="200px">
<a href="img-1.jpg" rel="lightbox" title="My caption"><img src="img-1.jpg" width="80px"></a>
</td>
<td width="200px">
<a href="img-1.jpg" rel="lightbox" title="My caption"><img src="img-1.jpg" width="80px"></a>
</td>
</tr>
</table>

---STOP COPYING CODE---
-->

Well, you can keep going on and on with the tables. But, a tr is a "table row" and a td is a "table cell", which is another column in that row. I created a table example here with these codes: Table Example
Photo of Mike C

Mike C

  • 86 Posts
  • 1 Reply Like
It's too complex for what I need. The lightbox is working fine. Thank you for that Lightbox 2 link. There should be a simple way to do this with CSS
Photo of Nathan

Nathan, Champion

  • 3739 Posts
  • 307 Reply Likes
<!--

Yeah, there is a way with css. You can position them all on the page to where you want them.

You would have to put each picture in a div. Then, add the style to it (style is css)

<div style="position:absolute; top:300px; right:400px; display:block;"><img src="image-1.jpg"></div>

Then, just do this for the rest. But you would need to adjust the pixels in that code and stuff, because I just guessed on the number of pixels from the top and right.

-->
Photo of Mike C

Mike C

  • 86 Posts
  • 1 Reply Like
yeah that would be absolute positioning which I don't want either. I guess I'm hard to satisfy. But there should be a simple way to push the text to the right of the picture. I just have to keep googling around. It will be the same css rule for each image which is what will make it easy.....
Photo of Nathan

Nathan, Champion

  • 3739 Posts
  • 307 Reply Likes
Oh, wait, I though you wanted to make all of the thumb nails to be aligned on the page like here: http://www.nathansmusicstudio.cz.cc/t... So, all you want is the text next to the picture? Also, when you publish your site, can I look at how the lightbox looks? What's the URL?
Photo of Mike C

Mike C

  • 86 Posts
  • 1 Reply Like
Right, for example, look at my avatar to the left of the message and picture lots of text like this Right, for example, look at my avatar to the left of the message and picture lots of text like thisRight, for example, look at my avatar to the left of the message and picture lots of text like thisRight, for example, look at my avatar to the left of the message and picture lots of text like thisRight, for example, look at my avatar to the left of the message and picture lots of text like thisRight, for example, look at my avatar to the left of the message and picture lots of text like this.

And then imagine the avatar is centered vertically next to this block of text. That's how I want each block to look. If the text and image is contained in a text widget, then once it's made, I can drag it and change the order, etc. I don't have a URL just yet...
Photo of Nathan

Nathan, Champion

  • 3739 Posts
  • 307 Reply Likes
Hi I understand now :) I'm going to sleep though, I am so tired. I will get right back to this in the morning. Good night =)
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
Hello Mike

Vertically aligning your images against a block of text is very difficult to attain. While you are able to set it up for one line of text quite easily by following this code:

<!--<p>
<img src="http://yoursite.yolasite.com/resource..." alt="image" style="vertical-align:middle;" />
The quick brown fox jumped over the lazy sleeping dog.
</p>-->

It is not so easy for multiple lines. I have been researching this and came across one possibility that may work but it does require you do some tweaking: http://haslayout.net/css-tuts/Vertica...

Good luck! I hope you can make this work
Photo of Mike C

Mike C

  • 86 Posts
  • 1 Reply Like
Hi Sanja, I will try to mess around with some of the items on that page and let you know what happens..
Photo of Mike C

Mike C

  • 86 Posts
  • 1 Reply Like
Hi Sanja, I did not have much luck with accomplishing the vertical alignment. So I think what might be easier is to have a narrow left column, and wide right column like I originally had. Insert the thumbnails with Nathan's lightbox html code as before, but then use some CSS styling for EACH image to position it correctly. Meaning, if I have say 10 lines of text to the right, I might need to push the thumbnail down some in order to center it. Can you tell me 1) what CSS rules would apply to vertically moving the thumbnail up and down (margin-top, padding-top, etc?) and 2) how to properly insert that CSS into the HTML widget.
This is the code that I'm using to insert the thumbnail and link via lightbox 2 (which works) to the big image (thanks Nathan!) :
<!--
<a href="resources/patron-photos/durante.jpg" rel="lightbox" title="my caption"><img src="resources/patron-photos/thumbs/Durante-photo.jpg"></a>
-->

I just need to know how to move the image up and down so that I can line it up with the text widget on the right side (I can control that with the margins properties of the text widget)

Thanks
Photo of Nathan

Nathan, Champion

  • 3739 Posts
  • 307 Reply Likes
Yeah, your welcome! :)
Photo of Mike C

Mike C

  • 86 Posts
  • 1 Reply Like
Hey Nathan,, did my question to Sanja make sense?
Photo of Nathan

Nathan, Champion

  • 3739 Posts
  • 307 Reply Likes
Yes
Photo of Mike C

Mike C

  • 86 Posts
  • 1 Reply Like
Ok good, because after I read what I wrote, I was confused! haha
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
Hi Mike

I will need to play around with this and get back to you. I will need the Lightbox code you are using. Thanks!
Photo of Mike C

Mike C

  • 86 Posts
  • 1 Reply Like
I've got it working now. I just have to add a margin-top rule to each HTML box that contains the code for the thumbnail. And I adjust the top margin of the text box too. It was rather tedious, but it's done! I also found a way to get around the hassle that the new preview function causes which I'll put in that post for others to see..
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
Great job Mike! Well done on sticking it out and figuring it out!
Photo of Nathan

Nathan, Champion

  • 3739 Posts
  • 307 Reply Likes
Hi Sanja, he is using Lightbox 2 code. Website: http://www.huddletogether.com/project...
Photo of Nathan

Nathan, Champion

  • 3739 Posts
  • 307 Reply Likes
Hi Mike, what is the page with the lightbox and stuff on it?
Photo of Mike C

Mike C

  • 86 Posts
  • 1 Reply Like
It's not on a domain yet, so no one can see it. Prior to the updates, I could just send the preview link and it would work, but now it requires you to be logged in. I don't like the recent changes Yola made to the previewing. I can send a screen shot of it to you though. What's really frustrating is that after all that, I discovered that the Flickr gallery method works fine. For some reason, in the editor window, it doesn't pull all the pictures in, but in the preview it was ok. But there's a max of I think 30 images for a flickr gallery so that's no good.
Photo of Nathan

Nathan, Champion

  • 3739 Posts
  • 307 Reply Likes
<!--

Hi Mike, did you happen to ever bookmark one of the old preview windows of your website? If you did, you can copy that, paste it in, and then change the page name at the end so you can see it and share the preview window! Also, it may be in your browser's history. Just try to find "http://sitebuilder.yola.com/sites/..." And, if it has "?sys_preview" at the end of that url it is the preview window! So, maybe you could try one of those.

-->
Photo of Mike C

Mike C

  • 86 Posts
  • 1 Reply Like
na, I never bookmarked or have them in the history. As I recall, those URLs were really long and complex. Yola, are you listening? Bring back the old preview method...
Photo of Nathan

Nathan, Champion

  • 3739 Posts
  • 307 Reply Likes
I like the new preview, just they should put a box that says "Get a short URL to share with others" or something. Just like the column to the right of this. It says "Get a short URL" and you click it and a URL pops up. They should do something like that.
Photo of Mike C

Mike C

  • 86 Posts
  • 1 Reply Like
I don't like it because it uses that javascript popup. I liked having the preview in a separate browser window that I could simply refresh after saving whatever I did in the editor. It was much simpler, and faster to work with.
Photo of Nathan

Nathan, Champion

  • 3739 Posts
  • 307 Reply Likes
Hi, the other window was JavaScript too. But, when I went to close it in google chrome, I would accidentally close the Google Chrome window, and it would mess it all up and close the browser and I would have to open all of the other things again! It's because the close button to the preview window was near the browser window close button.
Photo of Mike C

Mike C

  • 86 Posts
  • 1 Reply Like
Noooo the old preview button opened a new browser window altogether, i.e., with the address bar and the URL to the preview of that page. It might have been generated BY javascript, but it wasn't in a lightbox like it is now. Example, right click on the preview button and open in a new tab or window, and what you'll get is just another window with the Yola editor interface in it.
Photo of Nathan

Nathan, Champion

  • 3739 Posts
  • 307 Reply Likes
Oh, I know that. But, when it popped up in the new window it was smaller than the browser window and when I went to close the preview window, sometimes I would close the whole browser by accident.
Photo of Mike C

Mike C

  • 86 Posts
  • 1 Reply Like
Oh right right, I know exactly what you mean.. I've done that a number of times by accident.