Home/ Questions/Q 8617189
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-12T05:47:49+00:00

Using CSS, is it possible to right-align two DIVs? I have a title and

  • 0

Using CSS, is it possible to right-align two DIVs?

I have a title and I want to right-align a more link underneath it. The site is internal and so, unfortunately, IE7 is the primary browser. (We will upgrade to IE8 before the end of the year, and some are using Chrome). I’d like to avoid javascript, but I’m open to it.

The title changes, so absolute widths won’t work. It should look something like this:

| Arbitrarily long title text
|                     more...

I’ve been all over the Googles looking for a solution, but everything I’ve found so far relates to right-aliging the content of a DIV, or to right-aligning a DIV to the page, or right-aligning a DIV within an absolutely sized DIV.

I can show you my efforts so far, but as none of them work, I don’t think they’re of much use.

<html>
    <body>

        <div style="float:left;">
            Arbitrarily long title
            <div style="float:right">more...</div>
        </div>

        <div style="width:0px; overflow:visible; white-space:nowrap;">
            Arbitrarily long title
            <div style="float:right">more...</div>
        </div>

        <!-- This sort of simulates what I want, but the title length is arbitrary and I don't want to have to measure the text -->
        <div style="width:120px;">
            Arbitrarily long title
            <div style="float:right">more...</div>
        </div>

    </body>
</html>

If anyone knows of a duplicate question, I’d love to learn the secrets of your Google-fu!

EDIT
Image, as requested. The link is bordered with red. (I had to set the margin-left to 70px to achieve this affect.)

enter image description here

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Another way you might solve it (I don’t have IE here, so I can’t test it now, but I used similar styling on cross browser before).

    Snippet

    .title-block {
  float: left;
  position: relative;
  padding-bottom: 1em;
}

.more {
  position: absolute;
  right: 0;
  bottom: 0;
}

​
    <div class="title-block">
  <div>Arbitrarily long title</div>
  <div class="more">more...</div>
</div>​
    • 0