Align Widgets Horizontally (in Header Right)

Community Forums Forums Design Tips and Tricks Align Widgets Horizontally (in Header Right)

This topic is: resolved

This topic contains 2 replies, has 3 voices, and was last updated by  2FlyGirls 1 year, 4 months ago.

Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Posts
  • #57473

    JingDoc
    Participant
    Post count: 8

    I had two text widgets in the “Header Right” widget (of Outreach theme). I wanted to align them horizontally (side-by-side) rather than vertically, and thought I would share the instructions that I received Hope it helps someone else!

    You can float 2 widgets side by side by targeting them by Widget ID like this:

    #text-2 {
    float: left;
    }

    #text-3 {
    float: right;
    }

    http://css-tricks.com/all-about-floats/

    http://wpfab.com/how-to-customize-a-specific-wordpress-widget/

    If you’re doing this for your header widget area, you would also need to change the width of the header widget area to be wider:
    #header .widget-area {
    float: right;
    height: 100px;
    margin: 10px 0 0;
    width: 415px;
    }

    #57507

    Susan
    Moderator
    Post count: 9742

    Thanks for the tip!


    Susan @ Graphically Designing I offer theme customizations I tweet!
    I’ve taken up the challenge! – help me answer some of the unanswered posts

    #57641

    2FlyGirls
    Participant
    Post count: 8

    I could use some help –
    I put a Search Widget in the Header Right section and the white search box fills between the header area and the header right area. I would like to align it so it is in the middle of the header right area.
    Also, in Internet Explorer the search box is crowding the header logo area altogether.
    Thanks for anyone’s help in advance!
    jj

Viewing 3 posts - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.