Reputation: 51
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
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;
}
2nd is
.post_heading h1{float:left;}
Upvotes: 0
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
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
Reputation: 298076
Try floating your #post-heading h1
to the left:
#post-heading h1 {
float: left;
}
Upvotes: 0