CSS Help

[wsg14]

http://www.willgreen.me/stalk

what i need help with is the filter part.
i want it to go in a straight horizontal line, but instead it has several lines.
this is what it's suppose to look like:
http://www.willgreen.me/stalk/lolz.png

here's my CSS and HTML:

html;

<div id="results">
results for: $search_name

<div id="filter">
filter <strong><div style="font-size: 18px;">{</div></strong>

<img src="http://www.willgreen.me/stalk/images/icons/facebook.png" border="0" /><img src="http://www.willgreen.me/stalk/images/icons/flickr.png" border="0" /><img src="http://www.willgreen.me/stalk/images/icons/lastfm.png" border="0" /><img src="http://www.willgreen.me/stalk/images/icons/plurk.png" border="0" /><img src="http://www.willgreen.me/stalk/images/icons/tumblr.png" border="0" /><img src="http://www.willgreen.me/stalk/images/icons/twitter.png" border="0" />
<img src="http://www.willgreen.me/stalk/images/icons/vimeo.png" border="0" />
<img src="http://www.willgreen.me/stalk/images/icons/youtube.png" border="0" />

<strong><div style="font-size: 18px;">}</div></strong>
</div>
</div>

css;

#results {
background-image: url(http://willgreen.me/stalk/images/results.png);
width: 557px;
height: 52px;
color: #525f6b;
text-shadow: #FFFFFF 1px 1px 0px;
padding-top: 25px;
padding-left: 25px;
margin: 1px auto;
}

#filter {
float: right;
margin-right: 25px;
height: 20px;
width: 200px;
}

+rep to anyone who contributes, i've been looking over this code for an hour now and it's bugging me that i can't fix it. maybe i'm just tired. thank you so much in advance!

[Sluing]

Can't help, but this is a great idea.

[Excellent2]

Try using a span on the {}'s instead of a div.

[emotional]

#results {
background-image: url(http://willgreen.me/stalk/images/results.png);
width: 557px;
height: 52px;
color: #525f6b;
text-shadow: #FFFFFF 1px 1px 0px;
padding-top: 25px;
padding-left: 25px;
margin: 1px auto;
}

#filter {
float: right;
margin-right: 25px;
height: 20px;
width: 240px;
}
.braces {
font-size: 18px;
font-weight: bold;
}


<div id="results">
results for: $search_name

<div id="filter">
filter <span class="braces">{</span>

<img src="http://www.willgreen.me/stalk/images/icons/facebook.png" border="0" />
<img src="http://www.willgreen.me/stalk/images/icons/flickr.png" border="0" />
<img src="http://www.willgreen.me/stalk/images/icons/lastfm.png" border="0" />
<img src="http://www.willgreen.me/stalk/images/icons/plurk.png" border="0" />
<img src="http://www.willgreen.me/stalk/images/icons/tumblr.png" border="0" />
<img src="http://www.willgreen.me/stalk/images/icons/twitter.png" border="0" />
<img src="http://www.willgreen.me/stalk/images/icons/vimeo.png" border="0" />
<img src="http://www.willgreen.me/stalk/images/icons/youtube.png" border="0" />

<span class="braces">}</span>
</div>
</div>

[Sluing]

<span id="filter">
filter <span class="braces">{</span>

<img src="http://www.willgreen.me/stalk/images/icons/facebook.png" border="0" />
<img src="http://www.willgreen.me/stalk/images/icons/flickr.png" border="0" />
<img src="http://www.willgreen.me/stalk/images/icons/lastfm.png" border="0" />
<img src="http://www.willgreen.me/stalk/images/icons/plurk.png" border="0" />
<img src="http://www.willgreen.me/stalk/images/icons/tumblr.png" border="0" />
<img src="http://www.willgreen.me/stalk/images/icons/twitter.png" border="0" />
<img src="http://www.willgreen.me/stalk/images/icons/vimeo.png" border="0" />
<img src="http://www.willgreen.me/stalk/images/icons/youtube.png" border="0" />

<span class="braces">}</span>
</span>


The DIV breaks a line, which is why it is going to the next line, I assume is the issue.

[Excellent2]

Tested with Firebug, should work.


<div id="results">
results for: $search_name

<span id="filter">
filter <strong><span style="font-size: 18px;">{</span></strong>

<img src="http://www.willgreen.me/stalk/images/icons/facebook.png" border="0" /><img src="http://www.willgreen.me/stalk/images/icons/flickr.png" border="0" /><img src="http://www.willgreen.me/stalk/images/icons/lastfm.png" border="0" /><img src="http://www.willgreen.me/stalk/images/icons/plurk.png" border="0" /><img src="http://www.willgreen.me/stalk/images/icons/tumblr.png" border="0" /><img src="http://www.willgreen.me/stalk/images/icons/twitter.png" border="0" />
<img src="http://www.willgreen.me/stalk/images/icons/vimeo.png" border="0" />
<img src="http://www.willgreen.me/stalk/images/icons/youtube.png" border="0" />

<strong><span style="font-size: 18px;">}</span></strong>
</span>
</div>

[wsg14]

thank you all. :)

[Kyle!]

Wow, a really great idea. All the best with this project.

[J0SH]

That's a great idea, good to see you've got the code working. :)