XF 1.5 How would I align my article text to the left of an image?

Brad Padgett

Well-known member
Hey guys you can view my site to provide help here:

www.thexboxcloud.com

I managed to get the image to float right of the article text but can't quite manage to stop the text from wrapping around the image.

If you could do me a huge favor and provide the proper css for allowing the text and image to float next to eachother without wrapping around.

Thanks a lot.

- TheXboxCloud
 
Can you better explain what it is that you're trying to do? Maybe with a pic?

BTW... It looks like you're adding your floated image at different points within your articles as each has a different amount of white space at the top. Makes for an inconsistent look.
 
Can you better explain what it is that you're trying to do? Maybe with a pic?

BTW... It looks like you're adding your floated image at different points within your articles as each has a different amount of white space at the top. Makes for an inconsistent look.

I'm trying to have 2 columns only. 1 column text only and 1 column with the image.

I do not want any of the text to go into the images column or vice versa.

I need text on the left side and the image on the right side.

Thanks.
 
So you're really looking to use columns/tables, and not a floated image.

Have you tried something like this:

Columns BB Code by Waindigo

I need a template hack or css code.

I don't need to add another mod because I already have several and for something so simple to do, I would appreciate it if someone just knew the correct css code.

If I got both to float then it would work but I don't know the code for the actual text itself.

The image is .bbcodeimage

Does anyone know what the code css is for the actual text it self?

My problem is I'm only floating the image and not the text.
 
I'm trying to have 2 columns only. 1 column text only and 1 column with the image.

I do not want any of the text to go into the images column or vice versa.

I need text on the left side and the image on the right side.

Thanks.

How do you want it to look on mobiles? Normally the entire right column would go underneath the left column
 
Not really sure if this is what you're trying to achieve but if it is you could try adding something like this

Code:
.sectionMain.ctaFtContainerPage .bbCodeImage {
    width: 90%;
    max-width: 400px;
    padding: 15px 20px 135px 15px;
    position: relative;
}

columns.webp
 
Not really sure if this is what you're trying to achieve but if it is you could try adding something like this

Code:
.sectionMain.ctaFtContainerPage .bbCodeImage {
    width: 90%;
    max-width: 400px;
    padding: 15px 20px 135px 15px;
    position: relative;
}

View attachment 116787

Thank you. That's amazing. I had used the same classes but didn't think making the position relative would make a difference.

You definitely get a +Like from me. I appreciate your help @Gemma

EDIT: Yeah I could actually still use some help. What I'm trying to do is get the text and image in 2 separate columns. After trying I noticed the padding was all that was keeping the text from crossing over to the other column. Plus the "read more" link is in different places on different articles.

If anyone knows how I can do this without a mod let me know. Because even in the mod suggested. It's bbcode and wouldn't work on the article view unless I had my users display the image and text side to side in the thread post which isn't viable.

Thank you.
 
Last edited:
Top Bottom