Kaneda
Kaneda

Reputation: 51

Horizontal aligning with CSS

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>

Upvotes: 0

Views: 2093

Answers (4)

maxisam
maxisam

Reputation: 22705

You have two options.

Fist one is

<div class="post-heading">
  <h1>Title</h1>
<span class="icon_container"> [icon] </span>
</div>
.post-heading *{
    display:inline;
}

Example

2nd is

.post_heading h1{float:left;}

Example

Upvotes: 0

Johnny Craig
Johnny Craig

Reputation: 5002

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;}

Upvotes: 0

Danny
Danny

Reputation: 7518

The h1 and the images needs to have the

style="display:inline"

if you want the images to have the same horizontal alignment.

Upvotes: 1

Blender
Blender

Reputation: 298076

Try floating your #post-heading h1 to the left:

#post-heading h1 {
  float: left;
}

Upvotes: 0

Related Questions