Aligning items in CSS

[CMonique]

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

[Paulie_D]

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

[CMonique]

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

[CMonique]

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

[CMonique]

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?

[CMonique]

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

[CMonique]

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

[Paulie_D]

>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…

[Paulie_D]

>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??

[CrocoDillon]

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

[CMonique]

oh ok, that makes sense! Thanks CrocoDillon.

Thanks for your help Paulie, really appreciate it!

[CMonique]

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.

[Paulie_D]

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

[Author]

Posts