If you need support from Yola please contact us via support@yola.com or make use of our live chat service! We are working on a new approach to community-based support and during this transition period we are not adding any new threads to this forum. Many thanks to everyone who has participated over the years and we look forward to unveiling a new peer-to-peer support system soon!

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

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?

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

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

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

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

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

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?

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

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)

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

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.

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.

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.

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.

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.

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.