Member Avatar for Member #160597

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.

  • 3 Contributors
  • 2 Replies
  • 210 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by ko ko

Dani AI

Generated

Short answer: make the third list item span a full line with CSS instead of adding markup. ’s width/BR ideas are quick hacks; was on the right track about changing how list items are laid out. Two robust approaches follow — a modern one (flexbox) and a simple fallback (floats) — plus quick troubleshooting notes.

/* modern: right-aligned, allow wrap; third item forced to next line */
ul#another-name {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  justify-content: flex-end;
  flex-wrap: wrap;
}
ul#another-name li { margin-left: 8px; }
ul#another-name li:nth-child(3) {
  flex-basis: 100%;
  text-align: right;
  margin-left: 0;
}
/* fallback for older browsers: float items right, then clear for the third */
ul#another-name { margin:0; padding:0; list-style:none; }
ul#another-name li { float: right; margin-left: 8px; }
ul#another-name li:nth-child(3) {
  float: none;   /* stop floating so it sits below the floated items */
  clear: right;
  width: 100%;
  text-align: right;
}

Notes and troubleshooting: if nth-child/:last-child selectors are not available in the target browsers, add a class to the third item (for example <li class="stack">) and target that. Watch default UL padding/margins and inline whitespace (inline-block spacing can create unexpected wrapping). For accessibility keep logical source order unchanged; floats can affect visual order so prefer flexbox where possible. Use browser devtools to inspect computed widths when a line won’t break as expected.

Recommended Answers

All 2 Replies

Member Avatar for Dandello

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.

Member Avatar for ko ko 
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.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.