Grow your CSS skills. Land your dream job.

Aligning items in CSS

  • # March 12, 2013 at 6:24 am

    Hi,

    I’m desperately trying to align my slider and sidebar widget next to each other on the same line but am failing at every hurdle!

    I’ve been coming back to it for the last couple of days and it needs to be finished today! Please help

    Take a look at the home page here http://getyourswaggaback.com to see exactly what I mean.

    Thanks in advance

    C

    # March 12, 2013 at 6:38 am

    Giving them widths might be an idea.

    # March 12, 2013 at 7:23 am

    Hey Paulie,

    They have widths, this is the section of the code I’m trying to sort out. When I gave the widget a px width it messed up the other sidebars further down the page.

    #slider {
    position:relative;
    }

    #slider
    .sidebar-top,
    .widget {
    float:right;
    max-width:88%;
    width:auto;
    text-align:center;
    }

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

    #slider a:active {
    outline:none;
    }

    .slides,
    .flex-control-nav {
    margin:0;
    padding:0;
    list-style:none;
    }

    .slides {
    width:550px;
    height:300px;
    overflow:hidden;
    }

    #slider .slides > li {
    display:none;
    position:relative;
    margin:0;
    }

    #slider .slides li:first-child {
    display:list-item;
    }

    .flex-pauseplay span {
    text-transform:capitalize;
    }

    .slides:after {
    content:”.”;
    display:block;
    clear:both;
    visibility:hidden;
    line-height:0;
    height:0;
    }

    .flex-control-nav {
    position:relative;
    right:0;
    bottom:8%;
    width:50%;
    list-style: none;
    text-align:center;
    }

    .flex-control-nav li {
    display:inline-block;
    margin:0 0 0 15px;
    }

    .flex-control-nav li:first-child {
    margin:0;
    }

    .flex-control-nav li a {
    display:block;
    width:10px;
    height:10px;
    cursor:pointer;
    background:rgba(255, 255, 255, .4);
    border-radius:24px;
    color:#333;
    font-weight:600;
    line-height:24px;
    text-indent:-48px;
    overflow:hidden;
    }

    .flex-control-nav li a.flex-active,
    .flex-control-nav li a:hover {
    background:rgba(255, 255, 255, .8);
    }

    .flex-direction-nav,
    .flex-pauseplay {
    position:absolute;
    left:60px;
    bottom:8%;
    width:100px;
    margin: 0;
    list-style: none;
    font-size: 18px;
    font-weight: 600;
    z-index: 2;
    }

    .flex-pauseplay {
    left:15px;
    width: 26px;
    font-size: 15px;
    }

    .flex-pause {
    font-family: sans-serif;
    }

    .flex-direction-nav li,
    .flex-pauseplay a {
    float: left;
    margin: 0 5px;
    background: rgba(0, 0, 0, .15);
    border-radius: 4px;
    }

    .flex-direction-nav a,
    .flex-pauseplay a {
    display: inline-block;
    width: 18px;
    padding: 4px 8px;
    color: #fff;
    opacity: .8;
    text-align: center;
    cursor: pointer;
    }

    .flex-direction-nav a:hover,
    .flex-pauseplay a {
    opacity: 1;
    }

    #slider .hentry {
    margin:0;
    box-shadow:none;
    background:none;
    border:none;
    color:#fff;
    text-align:right;
    }

    #slider .wp-post-image,
    #slider .entry-attachment {
    position:relative;
    top:0;
    left:0;
    width:100%;
    }

    #slider .entry-attachment {
    z-index: 1;
    }

    #slider ul li:first-child .entry-container {
    display: block;
    }

    #slider .entry-title {
    display: none;
    position:absolute;
    top:32%;
    right:0;
    z-index:1;
    float:right;
    float:right;
    margin:0;
    font-family: “Open Sans”, sans-serif;
    font-size:25px;
    line-height:1.62em;
    }

    #slider .entry-title a {
    display:block;
    padding:10px 20px;
    background:rgba(0, 0, 0, .15);
    color:#fff;
    }

    #slider .entry-summary {
    clear: both;
    float:right;
    max-width: 61.8%;
    min-width: 324px;
    padding:10px 20px;
    background:rgba(0, 0, 0, .15);
    }

    #slider .entry-summary .entry-attachment {
    position:static;
    max-width:100%;
    height:auto;
    padding:0;
    background:none;
    }

    #slider .entry-attachment,
    #slider .entry-attachment p {
    margin-bottom:0;
    }

    # March 12, 2013 at 7:35 am

    In Web Inspector no size is being applied to the section with an ID of slider.

    Ditto for #sidebar-top and .widget-area

    # March 12, 2013 at 7:39 am

    Really? I thought it has a size of 550px 300px. Where and how should I input that then?

    # March 12, 2013 at 7:52 am

    I can see it in your CSS file but something is obviously overriding it…I just can’t figure out what.

    # March 12, 2013 at 7:57 am

    Oh man! Maybe it’s something within the theme, would you mind having a look at the rest of the code if I copy/paste it or Can I email it to you?

    # March 12, 2013 at 8:00 am

    Slider is getting the 550×300 width.

    I don’t understand what you’re doing here:

    #slider
    .sidebar-top,
    .widget {
    float:right;
    max-width:88%;
    width:auto;
    text-align:center;
    }

    since you don’t have a class `sidebar-top` inside `#slider`

    # March 12, 2013 at 8:03 am

    Give the #slider and .widget-area float:left perhaps? Not sure if that’s what you’re after.

    # March 12, 2013 at 8:03 am

    You can start by setting `float: left;` on `#slider` and `float: right;` on `#sidebar-top`.

    EDIT: Oops, too late xD

    # March 12, 2013 at 8:03 am

    OK….the width of the slider is now showing up and all of the controls are appearing in the right place.

    I **think** you would have to add ‘float:left’ to the #slider section AND float:right on #sidebar-top div.

    That should get them alongside one another if a width is set on #side-bar-top (perhaps 400px?). The image in the sidebar isn’t showing up for me.

    # March 12, 2013 at 8:04 am

    Hi CrocoDillon,

    I thought I had put it in the #slider section, it definitely moved up there when I changed the script.

    I’ve hit a wall and not sure what to do with this, need to be finished today. What can I do? I just want a widget showing in the space next to the slider for ads/images/etc. Can this be done?

    # March 12, 2013 at 8:06 am

    I think three people just gave you the same solution to fix the issue…

    # March 12, 2013 at 8:08 am

    I’ve done the whole float:left thing and I’ve tried display:block, not sure if there is something else in the script that is somehow stopping it from working. Let me try it again and see.

    # March 12, 2013 at 8:18 am

    Is this what you meant Paulie D?

    #slider {
    position:relative;
    float:left;
    }

    #slider
    .sidebar-top,
    .widget {
    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;
    }

    #slider a:active {
    outline:none;
    }

    .slides,
    .flex-control-nav {
    margin:0;
    padding:0;
    list-style:none;
    }

    .slides {
    width:550px;
    height:300px;
    overflow:hidden;
    }

    #slider .slides > li {
    display:none;
    position:relative;
    margin:0;

Viewing 15 posts - 1 through 15 (of 28 total)

You must be logged in to reply to this topic.

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