1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

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

Discussion in 'Styling and Customization Questions' started by TheXboxCloud, Sep 11, 2015.

  1. TheXboxCloud

    TheXboxCloud Active Member

    Hey guys you can view my site to provide help here:


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

    Tiki Tiki Active Member

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

    TheXboxCloud Active Member

    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.

  4. Tiki Tiki

    Tiki Tiki Active Member

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

    TheXboxCloud Active Member

    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.
  6. Mr Lucky

    Mr Lucky Well-Known Member

    How do you want it to look on mobiles? Normally the entire right column would go underneath the left column
  7. TheXboxCloud

    TheXboxCloud Active Member

    I have used responsive code for it to look good on mobile. It was off the page before I added the code.

    This should be easy for some of you. What is the article text class?
  8. Gemma

    Gemma Well-Known Member

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

    .sectionMain.ctaFtContainerPage .bbCodeImage {
        width: 90%;
        max-width: 400px;
        padding: 15px 20px 135px 15px;
        position: relative;
    TheXboxCloud likes this.
  9. TheXboxCloud

    TheXboxCloud Active Member

    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: Sep 13, 2015

Share This Page