Grow your CSS skills. Land your dream job.

Floating a javascript Slideshow

  • # February 27, 2009 at 6:18 pm

    Hi Everyone,

    I was wondering if someone could help me with a small problem I am having, I am trying to float two divs side by side, the left div is supposed to just be text and the right div is supposed to be a javascript slideshow. The only problem is that the slideshow has its own css and I can’t get it to float to the right, it always appears below the left div. I have tried adding the the float: right line of css to every part of it’s css as well as the main.css but it still wont work!

    You can have a look at the page here http://icedqueens.com/indexcss.html

    The slideshow css is here: http://icedqueens.com/css/slideshow.css

    And the main css is here: http://icedqueens.com/css/main-css.css

    Hopefully you guys will have some ideas on what to do,

    Thanks!

    Rob
    # February 27, 2009 at 7:13 pm

    is the layout you are talking about a table layout? Coz I had to fix the link you have there…

    # February 27, 2009 at 7:19 pm
    "Robskiwarrior" wrote:
    is the layout you are talking about a table layout? Coz I had to fix the link you have there…

    The link I gave in the post is all in css but the live version on the website is done in tables. I’m trying to convert the whole website to css

    # February 28, 2009 at 3:52 am

    For starters: there is no <align> element. so get rid of that – then your css links in the header should be reversed if you want to be able to override css from slideshow.css with main-css.css – also, make sure you’re taking into account the inline css that the script is adding to your slideshow divs

    this is the generated source of your slideshow divs

    Code:
    Our CupcakesOur Cupcakes

    In the end though, you’ve just misplaced a closing tag – I just achieved the effect in firebug by following these steps:
    1. remove the <align></align> tags
    2. move the </div> tag for #info from after #show to before #show, right after the info and the </strong> tag

    # February 28, 2009 at 6:00 am
    "JRGould" wrote:
    For starters: there is no <align> element. so get rid of that – then your css links in the header should be reversed if you want to be able to override css from slideshow.css with main-css.css – also, make sure you’re taking into account the inline css that the script is adding to your slideshow divs

    this is the generated source of your slideshow divs

    Code:
    Our CupcakesOur Cupcakes

    In the end though, you’ve just misplaced a closing tag – I just achieved the effect in firebug by following these steps:
    1. remove the <align></align> tags
    2. move the </div> tag for #info from after #show to before #show, right after the info and the </strong> tag

    It worked,Thank you so much! You’re complete lifesaver :D I cant believe it was that simple :P

    # February 28, 2009 at 1:55 pm

    Glad I could help – I get a sick pleasure out of debugging… :p

Viewing 6 posts - 1 through 6 (of 6 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".