I'm working on this website: <!-- m --><a class="postlink" href="http://www.printfreegraphpaper.com">http://www.printfreegraphpaper.com</a><!-- m -->, please note it's still heavily being worked on, and none of the files have been uploaded yet.
I have links to all the pdf files that will be available, and they were organized in a table. But being a good soul, I got rid of the table, and did the layout with CSS using the DIV tags.
I have two problems though. In IE, the links are in one of four columns, but they stagger down the page instead of lining up horizontally together like I would like them to. In Firefox, they don't appear in columns at all, just a long list of links.
Hoping someone can help. ThanksTry something like this:
Style section:
.fl {float: left;width:18%;}
.nf {float: none;width:auto;}
Document markup:
<h3>Imperial (Inch based)</h3>
<div class="fl">
<a href=http://www.webdeveloper.com/forum/archive/index.php/"#">1/2" Black & White</a><br>
<a href=http://www.webdeveloper.com/forum/archive/index.php/"#">1/2" Color</a><br>
<a href=http://www.webdeveloper.com/forum/archive/index.php/"#">1/2" PhotoBlind</a>
</div>
<div class="fl">
<a href=http://www.webdeveloper.com/forum/archive/index.php/"#">1/4" Black & White</a><br>
<a href=http://www.webdeveloper.com/forum/archive/index.php/"#">1/4" Color</a><br>
<a href=http://www.webdeveloper.com/forum/archive/index.php/"#">1/4" PhotoBlind</a>
</div>
<div class="fl">
<a href=http://www.webdeveloper.com/forum/archive/index.php/"1h5d" class="highlight">1/5" Black & White</a><br>
<a href=http://www.webdeveloper.com/forum/archive/index.php/"#">1/5" Color</a><br>
<a href=http://www.webdeveloper.com/forum/archive/index.php/"#">1/5" PhotoBlind</a>
</div>
<div class="nf">
<a href=http://www.webdeveloper.com/forum/archive/index.php/"#">1/10" Black & White</a><br>
<a href=http://www.webdeveloper.com/forum/archive/index.php/"#">1/10" Color</a><br>
<a href=http://www.webdeveloper.com/forum/archive/index.php/"#">1/10" PhotoBlind</a>
</div>
<h3>Metric (Centimeter based)</h3>
<div class="fl">
<a href=http://www.webdeveloper.com/forum/archive/index.php/"#">15cm Black & White</a><br>
<a href=http://www.webdeveloper.com/forum/archive/index.php/"#">15cm Color</a><br>
<a href=http://www.webdeveloper.com/forum/archive/index.php/"#">15cm PhotoBlind</a>
</div>
<div class="fl">
<a href=http://www.webdeveloper.com/forum/archive/index.php/"#">10cm Black & White</a><br>
<a href=http://www.webdeveloper.com/forum/archive/index.php/"#">10cm Color</a><br>
<a href=http://www.webdeveloper.com/forum/archive/index.php/"#">10cm PhotoBlind</a>
</div>
<div class="nf">
<a href=http://www.webdeveloper.com/forum/archive/index.php/"#">5cm Black & White</a><br>
<a href=http://www.webdeveloper.com/forum/archive/index.php/"#">5cm Color</a><br>
<a href=http://www.webdeveloper.com/forum/archive/index.php/"#">5cm PhotoBlind</a>
</div>
Each column is floated left except the last column in each section.Got a chance to implement it on my site, work鎶
I have links to all the pdf files that will be available, and they were organized in a table. But being a good soul, I got rid of the table, and did the layout with CSS using the DIV tags.
I have two problems though. In IE, the links are in one of four columns, but they stagger down the page instead of lining up horizontally together like I would like them to. In Firefox, they don't appear in columns at all, just a long list of links.
Hoping someone can help. ThanksTry something like this:
Style section:
.fl {float: left;width:18%;}
.nf {float: none;width:auto;}
Document markup:
<h3>Imperial (Inch based)</h3>
<div class="fl">
<a href=http://www.webdeveloper.com/forum/archive/index.php/"#">1/2" Black & White</a><br>
<a href=http://www.webdeveloper.com/forum/archive/index.php/"#">1/2" Color</a><br>
<a href=http://www.webdeveloper.com/forum/archive/index.php/"#">1/2" PhotoBlind</a>
</div>
<div class="fl">
<a href=http://www.webdeveloper.com/forum/archive/index.php/"#">1/4" Black & White</a><br>
<a href=http://www.webdeveloper.com/forum/archive/index.php/"#">1/4" Color</a><br>
<a href=http://www.webdeveloper.com/forum/archive/index.php/"#">1/4" PhotoBlind</a>
</div>
<div class="fl">
<a href=http://www.webdeveloper.com/forum/archive/index.php/"1h5d" class="highlight">1/5" Black & White</a><br>
<a href=http://www.webdeveloper.com/forum/archive/index.php/"#">1/5" Color</a><br>
<a href=http://www.webdeveloper.com/forum/archive/index.php/"#">1/5" PhotoBlind</a>
</div>
<div class="nf">
<a href=http://www.webdeveloper.com/forum/archive/index.php/"#">1/10" Black & White</a><br>
<a href=http://www.webdeveloper.com/forum/archive/index.php/"#">1/10" Color</a><br>
<a href=http://www.webdeveloper.com/forum/archive/index.php/"#">1/10" PhotoBlind</a>
</div>
<h3>Metric (Centimeter based)</h3>
<div class="fl">
<a href=http://www.webdeveloper.com/forum/archive/index.php/"#">15cm Black & White</a><br>
<a href=http://www.webdeveloper.com/forum/archive/index.php/"#">15cm Color</a><br>
<a href=http://www.webdeveloper.com/forum/archive/index.php/"#">15cm PhotoBlind</a>
</div>
<div class="fl">
<a href=http://www.webdeveloper.com/forum/archive/index.php/"#">10cm Black & White</a><br>
<a href=http://www.webdeveloper.com/forum/archive/index.php/"#">10cm Color</a><br>
<a href=http://www.webdeveloper.com/forum/archive/index.php/"#">10cm PhotoBlind</a>
</div>
<div class="nf">
<a href=http://www.webdeveloper.com/forum/archive/index.php/"#">5cm Black & White</a><br>
<a href=http://www.webdeveloper.com/forum/archive/index.php/"#">5cm Color</a><br>
<a href=http://www.webdeveloper.com/forum/archive/index.php/"#">5cm PhotoBlind</a>
</div>
Each column is floated left except the last column in each section.Got a chance to implement it on my site, work鎶