Aligning items in CSS

[CMonique]

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

[Paulie_D]

Giving them widths might be an idea.

[CMonique]

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;
}

[Paulie_D]

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

Ditto for #sidebar-top and .widget-area

[CMonique]

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

[Paulie_D]

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

[CMonique]

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?

[CrocoDillon]

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`

[Senff]

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

[CrocoDillon]

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

EDIT: Oops, too late xD

[Paulie_D]

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.

[CMonique]

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?

[Senff]

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

[CMonique]

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.

[CMonique]

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;

[Author]

Posts