CODEWITHSUNDEEP
htmlcss
Rob Y
Rob Y

Reputation: 841

"correct" way to do simple 2 column formatting in html

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!

Upvotes: 2

Views: 745

Answers (6)

Akrikos
Akrikos

Reputation: 3662

Instead of getting too 'div happy', I'd rather put ids on the anchor tags and apply styles to them directly. You may need to put a tag with 'clear: both;' after the links to clear the floats... I leave figuring that out that as an exercise for the reader.

<html>
<head>
<title>Test Page</title>
<style type="text/css">
#viewpage {
  float:right;
  margin-right:5%;
}
#listpages {
  float:left; 
}
</style>
</head>
<body>

  <a id='listpages' href="<? echo $url1 ?>">Back to List of Pages</a>
  <a id='viewpage' href="<? echo $url2 ?>">View this page</a>

</body>
</html>

The idea behind using CSS 'correctly' in this case is to make your html describe your content in a way that makes sense and then use CSS to change how the content is displayed.

Upvotes: 2

John Leidegren
John Leidegren

Reputation: 61037

This way you can adjust the column width, I've done it this way for quite some time now. I figured this out by studying Wikipedia HTML and CSS. Column B will occupy the remaining width but stay confined within the width of #outer-wrapper.

<div id="outer-wrapper">
<div style="float: left; width: 200px;">
    Column A
</div>
<div style="margin-left: 210px;">
    Column B
</div>
<div style="clear: both;"></div>
</div>

You can nest these are have a clear maintainable column based layout.

Upvotes: 0

Magnar
Magnar

Reputation: 28830

You can avoid the heavy markup by leveraging the fact that both links are oneliners. With this markup:

<div id="navigation"></div>    

<a id="view" href="...">View this page</a>
<a id="back" href="...">Back to List of Pages</a>

<form></form>

And this simple css:

#view {
    float: right;
}

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.

Upvotes: 4

jgallant
jgallant

Reputation: 11273

I think the best way to do any layout nowadays, is to use Grids. Once you get the hang of using grid layouts, you will never look back.

A good way to get started is to use Blueprint CSS. Its a nice framework to help you design a grid based layout.

Upvotes: 0

Johannes Weiss
Johannes Weiss

Reputation: 54081

You mean that?

 <html>
  <head>
    <style>
      div.fl {
        float: left;
      }
      div.fr {
        float: right;
        text-align: right;
      }
    </style>
  </head>
  <body>
    <div class="fl">
      A
    </div>
    <div class="fr">
      B
    </div>
  </body>
</html>

replace A and B

Upvotes: 0

Lennart Koopmann
Lennart Koopmann

Reputation: 21069

<div style="width: 95%">
  <div style="float: left;">Link 1</div>
  <div style="float: right;">Link 2</div>
</div>

Upvotes: 1

Related Questions