Databases
StackOverflow2013
Postsdbo
POHow to best align href link left, and text explanation to the right
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POHow to best align href link left, and text explanation to the right
    primarykey
    data
    text
    <p>This seems simple to me, but after days of trying (I have very limited experience) and searching for a solution, I have drawn a blank. I am creating a page of links on a single html page with embedded css style for use in a browser window.</p> <p>I wish to simply align my link to the left of my div, with a text explanation of the link which aligns to the right of the div. There is a wrapper div which contains two of these other div's (right and left), which contain boxes (categories) of links. The first example is merely using periods to create the desired space.</p> <p>So far I have tried the below HTML:</p> <pre><code>&lt;html&gt; &lt;body&gt; &lt;div class="wrapper"&gt; &lt;div class="div_body_side1"&gt; &lt;div id="div_category01"&gt; &lt;p&gt; &lt;A HREF="http://www.webaddress" &gt; Short Description &lt;/A&gt;.................... Longer description of where this link will take you &lt;/p&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;/body&gt; &lt;/html&gt; </code></pre> <p>I also thought I may try this method (below) but I don't know how to color the text in the long description and align it to the far right of the category div. </p> <pre><code> &lt;tr&gt; &lt;td&gt; &lt;A HREF="http://www.webaddress" &gt; Short Description&lt;/A&gt; &lt;/td&gt; &lt;td&gt; Longer description of where this link will take you &lt;/td&gt; &lt;/tr&gt; </code></pre> <p>Will I have to create two more side-by-side divs inside each category to achieve what I'd like? I will also need the divs and text to 'shrink' (scale) horizontally for small laptop use and I know that a lot of div's (floating) somehow prevents proper scaling.</p> <p>I apologise for my lack of expertise, but I really have been looking for a solution for days. Thank-you in advance for any assistance. ............. ..................................................</p> <p>Hello again. Unfortunately, Billy Chan's answer did not work (but thank you for reminding me to use the 'title' attribute). I have tried it with a list of three links and what happens is the output looks like this:</p> <p>link1link2link3 explanation1explanation2explanation3</p> <p>Here is what I used:</p> <pre><code>&lt;div&gt; &lt;span class="link"&gt; &lt;a href="#whatever"&gt;Whatever&lt;/a&gt;&lt;/span&gt; &lt;span class="explanation"&gt;Whatever explain&lt;/span&gt; &lt;span class="link"&gt; &lt;a href="https://www.google.com.au"title="Google"&gt;Google search&lt;/a&gt; &lt;/span&gt; &lt;span class="explanation"&gt;Secure Google search page &lt;/span&gt; &lt;span class="link"&gt; &lt;a href="http://www.google.com/ncr" &gt;Google search&lt;/A&gt; &lt;/span&gt; &lt;span class="explanation"&gt;US Google search page &lt;/span&gt; &lt;/div&gt; </code></pre> <p>...with the following CSS:</p> <pre><code>&lt;style&gt; .link, .explanation {display:inline} .link {float: left} .explanation {float: right} &lt;/style&gt; </code></pre> <p>I shall now try the other solutions that have been kindly provided. Thank-you all so much.</p> <p>.......................................</p> <p>Thank-you dbaseman, but your solution requires two more divs within my category divs, does it not? I can't apply your "div class="right"" to my Category divs (which are an IDs), can I?</p> <p>Will now try Urg mu's solution. Cheers.</p> <p>Oh.. Urg mu - it seems you have provided a solution for colouring the text only. Your solution isn't going to align my 'long explanation' to the right is it?</p> <p>On to Naveen Sharma. I'm sorry but can you please explain what your solution is actually supposed to do?</p> <p>Thank you all again. I am learning a lot.<br> Cheers.</p> <p>Please see this horrible jsFiddle version of what I am trying to achieve. Yes, it includes lots of testing things and also the 'solutions' provided here.., and you will have to drag your browser window to the far right and the 'result' window to the far left to see my two divs side-by-side:</p> <p><a href="http://jsfiddle.net/wreckanoid/CdN2z/" rel="nofollow">http://jsfiddle.net/wreckanoid/CdN2z/</a></p>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PTQuestion
    1. USuser1828542
    1. USuser1828542
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    2. PO
      singulars
      1. PTAnswer
    3. PO
      singulars
      1. PTAnswer
    1. VO
      singulars
      1. POHow to best align href link left, and text explanation to the right
      1. This table or related slice is empty.
      1. VTUpMod
    2. VO
      singulars
      1. POHow to best align href link left, and text explanation to the right
      1. This table or related slice is empty.
      1. VTUpMod
    3. VO
      singulars
      1. POHow to best align href link left, and text explanation to the right
      1. USMcGarnagle
      1. VTFavorite
    1. COhow should it be displayed ?
      singulars
      1. POHow to best align href link left, and text explanation to the right
      1. USShamis Shukoor
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload