Archived

This topic is now archived and is closed to further replies.

  • 0

Horizontal Widget Placement in Universal Sidebar in Header Area


Question

Posted · Report post

I've used the universal sidebar in other sites with a single image or text widget without problem.

On a new site - www.usvihotelreservations.com I'm trying to use three images - each with their own navigation in the universal sidebar.

However, they stack vertically - when I want them to stack horizontally.

I've tried putting all three in one widget and now split them into three text widgets with html and no difference other than now they stack on top of each other.

I've tried using Firefox/firebug to change the CSS and nothing I try helps.

Am I missing something in the CSS or is this not possible with this sidebar?

I thought I'd ask the experts before I go completely crazy trying different css combinations.

Thanks!

Rick

Share this post


Link to post
Share on other sites

4 answers to this question

Posted · Report post

Hi there,

 

Yes you can do this using css, to the widgets inside that sidebar you'll need to apply float:left and a width. Like

 

 

.section-sb_universal .widget {
    float: left;
    overflow: visible;
    width: 33%;
}
 

That will give you something like this - http://screencast.com/t/uGr9aKTRLIA

Share this post


Link to post
Share on other sites

Posted · Report post

Thanks!

Share this post


Link to post
Share on other sites

Posted · Report post

Thanks - this worked fine.. I was missing the section...

Now I have a big space between the text highlight and the universal sidebar that says that it is content pad in firebug...

Will try to debug that tomorrow unless you have any insight....

Thanks!

Rick

Share this post


Link to post
Share on other sites

Posted · Report post

Yeah its the content-pad, as you've moved the widgets out of the sidebar into another position using css, that space is the content-pad inside the universal sidebar container which is still in the original position. If you set the padding in there to zero it will close up the gap.

Share this post


Link to post
Share on other sites