This is a challenge for the css gurus out there. I want to show 2 links on my page, on the same ‘line’, one on the left, one on the right.
The code below works perfectly well in terms of visual presentation, but I’m aware that tables to format a page are not the done thing. Can anyone tell me what the ‘approved’ markup for this should be? I am guessing that this is really simple but I keep mashing up the rest of my page when I try, and keep reverting to the table because it takes seconds to write and does the job, I’m just keen to understand how I should do it.
(I have a element holding the page header / nav above it, and another holding a form directly below it.)
<table width=95%> <tr> <td> <a href='<? echo $url1 ?>'>Back to List of Pages </a> </td> <td align='right'> <a href='<? echo $url2 ?>'>View this page</a> </td> </tr> </table> edit – answer found!
OK, I have tested out both Akrikos’ and Magnar’s answers, and Magnars seems to work best in my situation. I found with Akrikos’ method I id need to put a clear:both element underneath to prevent it merging with the div below. also, it was easy to wrap Magnar’s in a
element so the links match the rest of my page, which provided the necessary space between the links and the div below – I needed to put some other spacer in there with Akrikos’ method. Thanks to everyone for your help with this though – I’ve learned a lot in the last 40 minutes!
You can avoid the heavy markup by leveraging the fact that both links are oneliners. With this markup:
And this simple css:
No clearing necessary, and no need to specify widths.
This solution would only work for this scenario: two links. If you need more, then you should look at a set of floating list items.