Can I line up text links plus 3 icons?

[dandelion]

Inside my header I would like to have a line of small global text links, plus three social media icons that also link. I would like these to be in a row. I don’t care if the text aligns with the middle of the icons or the bottom. But right now there is all this space and I’m stumped. I would like the whole set to sit just above the navigation bar and be aligned to the right.

I have looked at other sites doing something similar and they have either put in a table or they have the social media icons as an `

` list and each `
• ` has a background image. Which seems unnecessarily complicated to me.

  I was hoping to keep this simple, but maybe that’s not possible here?

  http://cdpn.io/grknG

[chrisburton]

Can you post your code to http://codepen.io?

Please make sure your icons, if they’re images, show up.

[Paulie_D]

Here’s a quick effort: http://codepen.io/Paulie-D/pen/yvdEh

[dandelion]

Can you guys not see my code pen? The link is right after my question. Paulie, those are lining up, but one of the challenges I am having is that I want the 3 icons to follow a set of text links. They are not interspersed.

http://cdpn.io/grknG

[Paulie_D]

I’m sure you could adapt what I have done to your requirements.

[CrocoDillon]

Add this and remove the floats from the span and the social media div.

#header .sub-navigation {
text-align: right;
}
#header .sub-navigation span {
/* remove float */
}
#header .sub-navigation .social-media {
/* remove float */
display: inline-block;
}

Do you really need `#header` in those selectors?

[dandelion]

Paulie, you were right. It took a bit of tweaking but starting with your code I got there in the end. I think my mistakes were not setting the

to inline, thinking that I had to wrap the images in a

, and in adding a width to the sub-navigation. But I thought I read once that you always had to define a width for any element that floats.

[dandelion]

CrocoDillon,

Thanks for your help too. I like to keep the #header as part of the style names to help me group and find these later. I’ll have different areas of sub-navigation and this will make it easy to see the styles for the sub-nav in the header vs the sub-nav in the sidebar or the page content.

[chrisburton]

The reason I couldn’t see the link to your pen was because it wasn’t there initially.

[Author]

Posts