How to make widgets align side by side

[john gronley]

Hello;

If I add two image widgets to an upper header widget they will stack on top of each other; is there some code that I can add to a site that will allow me to get these images side by side?

Thanks,

John

[Brad Dalton]

You can use the native media function to add 2 images side by side by selecting align none and then add the HTML to a text widget.
Example:

<a href="http://127.0.0.1:4001/wordpress/wp-content/uploads/2013/04/package_gear_128.png"><img class="alignnone size-full wp-image-38150" alt="package_gear_128" src="http://127.0.0.1:4001/wordpress/wp-content/uploads/2013/04/package_gear_128.png" width="128" height="128" /></a> <a href="http://127.0.0.1:4001/wordpress/wp-content/uploads/2013/04/shield_128.png"><img class="alignnone size-full wp-image-38149" alt="shield_128" src="http://127.0.0.1:4001/wordpress/wp-content/uploads/2013/04/shield_128.png" width="128" height="128" /></a>

---

Tutorials for StudioPress Themes.

[john gronley]

Thanks Brad; I must confess I am ignorant of the native media function? Is there a site I can go and learn about this?

Thanks,

John

[Brad Dalton]

I just added 2 existing images from the media library side by side in a new post draft.

Really simple. none for alignment.

Can also add custom links.

---

Tutorials for StudioPress Themes.

[john gronley]

I think I got it in the image widget select "2" and this does it. Thanks this will help for loading up the header with buttons and logos for several of my clients!

Thanks again!

[john gronley]

Hey Brad I am trying to get an image to the left of the text widget in the upper right header. I tried the code above but couldn't manipulate it to get a text widget and image side by side. Any ideas? http://nelsonazrealestate.com/

Thanks,

John

[john gronley]

I got it by adding this to the style sheet

#header .widget-area aside {
display: inline-block;

[Brad Dalton]

OK great.

---

Tutorials for StudioPress Themes.

[john gronley]

Hey Brad;

How would I use the code to get two widgets side by side in Agentpress for the widget place-holder of the top-search? I tried to use .widget-area aside {
display: inline-block;
But it didn't seem to work for this widget area? http://chandler-homesfor-sale.com/category/homes-for-sale/

Thanks,

John

[Brad Dalton]

I asked css tricks this question last week and still haven't worked it out.

---

Tutorials for StudioPress Themes.

[john gronley]

OK well I learned how to get three widgets in the header from this link, thanks! I am not too familiar with the nomenclature of CSS but if we added a declarative statement to the style sheet for the top search...would that be the issue? I noticed there is no #top-search . widget-area

[Brad Dalton]

I did try different code and worked hard on this for some time but couldn't work it out.

I'm sure it will come to me at some stage as everything else eventually has.

---

Tutorials for StudioPress Themes.

[john gronley]

Brad I got this code from a fellow today this might work in the body and not only the header. I also joined an online CSS class called Treehouse for building responsive themes.

#r_sidebar ul li a {
display: block;
color: #000000;
text-decoration: none;
margin: 0px;
padding: 5px 0px 5px 0px;
}
#r_sidebar ul li a.inline{display:inline;}
#r_sidebar ul li a.inline img{padding:10px 10px 0 0;}

[Brad Dalton]

Thanks John

---

Tutorials for StudioPress Themes.

[Author]

Posts