What will be the alternative of the following code in CSS ( using Div ) for making two colum layout <table> <tr> <!-- Page Navigation Colum --> <td width='20%' vetical-align=top> Some links goes here </td> <!-- Page Contents --> <td width='80%' vetical-align=top> Some contents goes here </td> <tr> </table> Code (markup):
At its simplest the following: <html> <head> <style type="text/css" > #container { background:#fff; } #navigation { float:left; width:20%; } #content { margin: 0 0 0 25%; } </style> </head> <body> <div id="container"> <div id="navigation"> [COLOR=blue]Link here...[/COLOR] </div> <div id="content"> [COLOR=blue]Content here[/COLOR] </div> <br style="clear:both;"> </div> </body> </html> Code (markup): You will probably want to define the navigation column with a background colour which you can do with a background image on the #container <div> Mick
The other way to do this would be: <html> <head> <style type="text/css" > #container { background:#fff; } #navigation { float:left; width:20%; } #content { [COLOR="Blue"] float:right; width:75%;[/COLOR] } </style> </head> <body> <div id="container"> <div id="navigation"> Link here... </div> <div id="content"> Content here </div> <br style="clear:both;"> </div> </body> </html> Code (markup):
Arnica & Medusa, Just a quick question as coding without tables is relatively new for me. Is one of those two methods better than the other or does it not matter? Is using margins better than floats or vice versa? What's the pros and cons? Thanks!
I do not think there is any significant difference. Two ways of doing the same thing. However, sometimes, if you can achieve the same result with less bytes in the code, the page loads faster... Can't say that about the example above anyway, too small a difference.
Medusa is spot on with comments on the methods shown. The floats point is an interesting one because you can then increase the prominence of your content (ie placing before your navigation in your html stream). As to whether this makes a significant difference is up for debate but I tend to think that anything that does no harm and may have benefit is better to do than not. Just back from the pub so apologies in advance if that doesn't make sense. Mick
Thanks so much Mick and Medusa. I just like to do things the best possible way, I thought I read somewhere to try not to use floats but I can't remember what exactly I read. I also love the ability with floats to place the content before the navigation in the source so it will be sure to get spidered and viewed as what's most important for seo purposes. Thanks again. Kalina