Grow your CSS skills. Land your dream job.

Aligning items in CSS

  • # March 12, 2013 at 8:20 am

    It hasn’t moved the sidebar top but has messed up the lower side bars http://getyourswaggaback.com/

    # March 12, 2013 at 8:21 am

    No…

    Add float:left to #slider

    Then

    #sidebar-top {
    float:right;
    width:400px;
    text-align:center;
    }

    This is wrong..

    #slider
    .sidebar-top,
    .widget {
    float:right;
    width:400px;
    text-align:center;
    }

    # March 12, 2013 at 8:29 am

    Like this?

    #slider {
    float:left;
    }

    #sidebar-top {
    float:right;
    width:400px;
    text-align:center;
    }

    #slider {
    border:15px solid #000000;
    width:550px;
    height:300px;
    margin:10px;
    box-shadow:0 7px 10px 0 #444444;
    }

    # March 12, 2013 at 8:29 am

    I’ve removed the position:relative, is that correct?

    # March 12, 2013 at 8:31 am

    Ok, great the other sidebars have stayed normal. Now how do i move the sidebar-top image up into the space next to the slider?

    # March 12, 2013 at 8:32 am

    Wicked! It’s moved!!! Thank you so much!

    # March 12, 2013 at 8:34 am

    Just one more thing, is there something more I have to do to get it to look the same on the ipad? It is still sitting below on there

    # March 12, 2013 at 8:34 am

    >I’ve removed the position:relative, is that correct?

    It’s probably not doing anything so it can’t hurt.

    You can combine this

    #slider {
    float:left;
    }

    and

    #slider {
    border:15px solid #000000;
    width:550px;
    height:300px;
    margin:10px;
    box-shadow:0 7px 10px 0 #444444;
    }

    into this

    #slider {
    border:15px solid #000000;
    width:550px;
    height:300px;
    margin:10px;
    box-shadow:0 7px 10px 0 #444444;
    float:left;
    }

    If you want…

    # March 12, 2013 at 8:38 am

    >Just one more thing, is there something more I have to do to get it to look the same on the ipad?

    That’s a whole other discussion.

    I suspect that we would have to start all over again to do that….from what I can see the rest of your sections / sidebars below this ‘messed up’ section are responsive so I guess this is something you’ve ‘tweaked’ from something that worked before??

    # March 12, 2013 at 8:40 am

    Slider is 600px width (including border and margin) and sidebar is 400px width. iPad portrait is 768px width.

    # March 12, 2013 at 8:53 am

    oh ok, that makes sense! Thanks CrocoDillon.

    Thanks for your help Paulie, really appreciate it!

    # March 12, 2013 at 8:55 am

    I have another website that has parameters larger than an ipad but it automatically shrinks to fit. Not sure what’s up with this theme I’m using for this one.

    # March 12, 2013 at 8:56 am

    Am I right in thinking that his top “area” is something that you have put in separate from the theme?

Viewing 13 posts - 16 through 28 (of 28 total)

You must be logged in to reply to this topic.

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