Header Right – Widgets to line up horizontally

[awohl]

Using Executive Pro. I have 2 widgets in header right. google translation and simple social icons. They are currently stacked one on top of the other. I would like them to be side by side horizontally.

Hopefully easy css to fix this?
(website not live yet, in development mode)

Thanks in advance!

[Brad Dalton]

Link to your site please.

---

Tutorials for StudioPress Themes.

[awohl]

Would a screenshot do the trick for you?

[Brad Dalton]

Float one to the left and the other to the right using CSS.

---

Tutorials for StudioPress Themes.

[awohl]

Was able to float social icon widget to right, just can't get the other widget that is part of header right to move.
I can make site live for a half hour so you can see...

[Brad Dalton]

You will need to use the correct classes. Here's an example http://wpsites.net/web-design/make-enews-subscribe-widget-input-box-inline-with-submit-button/

Here's another http://wpsites.net/web-design/make-enews-subscribe-widget-input-box-inline-with-submit-button/

Make eNews Subscribe Widget Input Box Inline With Submit Button

These should give you an idea on how you can do it.

Use:

.site-header .your-widget-class {
float: left;
}
.site-header .your-widget-class {
float: right;
}

You can also try changing the order of the widgets in the header right widget area.

---

Tutorials for StudioPress Themes.

[Besearched]

I am also attempting to do something similar, and experiencing frustration with the end result!
here is the url: http://besearched.biz/fivestars/

here is the corresponding css
.site-header .widget .textwidget #text-11 {
float: left;
width: 355px;

}

.site-header .widget .textwidget #text-12 {
float: right;
width:345px;

}

where am i screwing this up?

[awohl]

Hi Besearched - The website went live 2 weeks ago. http://www.DavidsDrugs.com . If you notice the "Click here and check out our monthly sales flyer!" link is to the left of the social icons on the homepage. I put the below code in the widget text box. All it needed was a div. I am not a master coder, but a friend of mine helped me out. Clearly for your needs, you would have to manipulate the below code, but hopefully it will give you insight as to how to do it. Hope this works for YOU and anyone else that visits this inquiry! Good luck!!! Amy

<div style="margin-top:-40px;margin-right:160px; text-align:right;">CLICK HERE and CHECK OUT OUR MONTHLY SALES FLYER!</div>

[Author]

Posts