Support » Plugin: Easing Slider » Easingslider and image side by side

  • Resolved veix

    (@veix)


    Hi
    I put Easingslider gallery into page’s header and aligned it to center. Now I want to put image next to it and align it to right so that they’re on same line.

    My header.php looks like this:

    <div class="header-gallery">[Easingslider Lite here]</div>
    <img class="header-logo" src="image.jpg">

    and ctyle.css looks like that:

    .header-gallery {
    	height: 190px;
    	width: 640px;
    	margin: 0 auto
    }
    .header-logo {
    	height: 190px;
    	width: 116px;
    	float: right
    }

    It works perfectly when either Easingslider or image is commented out in header.php. When removing comments image goes to next line.

    I’ve also tried to use table and align=”center” instead of css but nothing helps. So, can anyone please explain what I’m doing wrong here or how to get slider and image next to each other?
    Site is http://www.osanago.eu

    Thanks,
    Veiko

    http://wordpress.org/plugins/easing-slider/

Viewing 7 replies - 1 through 7 (of 7 total)
  • Plugin Author MatthewRuddy

    (@matthewruddy)

    Hi @veix, sounds like you’ll probably need to float both of the elements. Try this HTML:

    <div class="clear">
        <div class="header-gallery">[Easingslider Lite here]</div>
        <img class="header-logo" src="image.jpg">
    </div>

    With this CSS:

    .clear {
        overflow: hidden;
    }
    
    .header-gallery {
        float: left;
    }
    
    .header-logo {
        float: right;
    }

    Should hopefully do the trick 🙂

    Thanks for answering @matthewruddy
    It really did align them on one line but slideshow is like invisible or something. When looking page’s source code it’s easy to see that slideshow is there but it doesn’t display it.
    You can see it here: http://www.osanago.eu

    Plugin Author MatthewRuddy

    (@matthewruddy)

    Ah, I see what you mean. Try using this CSS instead.

    .clear {
        overflow: hidden;
    }
    
    .header-gallery {
        float: left;
        max-width: 640px;
        width: 100%;
        height: 190px;
    }
    
    .header-logo {
        float: right;
    }

    Thanks, now slider and logo are both on same line. 🙂
    Although, there’s funny thing that when I changed

    .header-gallery {
        float: center;
    }

    then logo jumped again to next line and was aligned to left. Don’t know why it does so but I guess float:left is also OK. 🙂

    Little typo. I meant:
    .header-gallery {
    float: center;
    max-width: 640px;
    width: 100%;
    height: 190px;
    }

    Plugin Author MatthewRuddy

    (@matthewruddy)

    That’s because ‘float: center’ isn’t a valid value – only ‘left’, ‘right’ or ‘none’ are supported float values 🙂

    Ok, thanks for explaining. I’m happy with current situation also. 🙂

Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘Easingslider and image side by side’ is closed to new replies.