Hi everyone,
I have to add a new link at the top in my webpages.We already have a couple of links at the top right and this new link should come exactly below it. We have CSS for aligning this link to the right and its within a div container. Basically the code looks like this :

<div id="somename">
content
<ul id="another name">
<li class="foo">link1</li>
<li class="bar">link2</li>
<li>link3</li>
</ul>
</div>
The foo class makes the hyper link as normal text and adds a line border like this |, the bar class does the same but without the |. The alignment attributes are provided by the CSS #somename.

Now my question, what CSS should I apply to make link3 appear below link1 and link2,before that how do I select <li>link3</li> for applying CSS ? By default if I don provide any CSS then link3 comes to the right of link2 (thats obvious because its within <div id="somename">.

I closed the <div> tag and created a new <div> for housing link3 and applied display:block. This works fine but I'm not supposed to close the <div>,link3 should be within the <div id="somename">. Really wierd !. Any help guys?:)

Just in case my post isn't clear, I'm providing a sample of how my page should be :

Link1 | Link2
Link3

The above links should be at the top right.

I'm not sure this can be done through css alone unless you limit the width of "somename" or of "another name" to something that just allows the two first links side-by-side. Otherwise, you may have to simply add a br inside the li for link3.

ul#another-name li {
      display: block;
}
ul#another-name li.foo, ul#another-name li.bar {
      display: inline;
}

This is all I understand your question. Post your CSS code to know more clearly.