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 2 years, 3 months ago.

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


    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;

    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;



    Thanks for the tip!

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



    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!

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

You must be logged in to reply to this topic.