Question

this is my first post here on StackOverflow and I’m quite excited about it since Google has brought me here quite often in the search of comprehensive answers.

Anyways, my question is quite simple but I can’t seem to figure it out. I am trying to align three small icons on the same line but to the right of my page/post title. The post heading code looks like this:

<div class="post-heading">
  <h1>Title</h1>
</div>

The 3 icons need to have their own ID in order to function properly. They are inserted like this:

`#icon_container {
position: relative;
margin: 0;
padding: 0;
line-height: normal;
font-size: medium;
width: 50px;}

`#icon_container #icon_1 {
    float: right;
    background-image: url(icon.png);
    background-repeat: no-repeat;}`


`#icon_container #icon_1 A {
    width: 24px;
    height: 24px;
    display: block;}`

So all I am trying to achieve here is to have the h1 title to the left, and on the same alignmnet to the right the 3 icons inserted with the above CSS. Can anyone help me out? I’d appreciate it a lot 🙂

Thanks all

EDIT

I forgot to mention the HTML code for the icons; here it is:

<div id="icon_container"><div id="icon_1"><a href="#" id="icon_1_button"></a></div><div id="icon_2....</div><div style="clear:both"></div></div>

Answer 1

you need to float post-heading and the icon elements to the left.

<div class="post-heading" > < h1 >Title < /h1 > < /div>
<div id='icon_container'>
    <div id='icon_1'></div>
    <div id='icon_2'></div>
</div>

#icon_container, #icon_1, #icon_2, .post_heading {float:left;}