1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

CSS Code Needed For This .......

Discussion in 'CSS' started by programmer, Aug 29, 2005.

0
  1. #1
    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):

     
    programmer, Aug 29, 2005 IP
  2. Arnica

    Arnica Peon

    Messages:
    320
    Likes Received:
    14
    Best Answers:
    0
    Trophy Points:
    0
    #2
    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
     
    Arnica, Aug 29, 2005 IP
  3. programmer

    programmer Guest

    Messages:
    444
    Likes Received:
    20
    Best Answers:
    0
    Trophy Points:
    0
    #3
    got the idea - thanks its working
     
    programmer, Aug 30, 2005 IP
    Colleen likes this.
  4. medusa

    medusa Peon

    Messages:
    349
    Likes Received:
    14
    Best Answers:
    0
    Trophy Points:
    0
    #4
    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):
     
    medusa, Sep 5, 2005 IP
    Colleen likes this.
  5. programmer

    programmer Guest

    Messages:
    444
    Likes Received:
    20
    Best Answers:
    0
    Trophy Points:
    0
    #5
    thanks medusa this is also good
     
    programmer, Sep 6, 2005 IP
  6. Colleen

    Colleen Illustrious Member

    Messages:
    6,777
    Likes Received:
    725
    Best Answers:
    1
    Trophy Points:
    430
    #6
    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! :)
     
    Colleen, Sep 16, 2005 IP
    medusa likes this.
  7. medusa

    medusa Peon

    Messages:
    349
    Likes Received:
    14
    Best Answers:
    0
    Trophy Points:
    0
    #7
    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, Sep 16, 2005 IP
  8. Arnica

    Arnica Peon

    Messages:
    320
    Likes Received:
    14
    Best Answers:
    0
    Trophy Points:
    0
    #8
    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
     
    Arnica, Sep 16, 2005 IP
    medusa likes this.
  9. Colleen

    Colleen Illustrious Member

    Messages:
    6,777
    Likes Received:
    725
    Best Answers:
    1
    Trophy Points:
    430
    #9
    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
     
    Colleen, Sep 16, 2005 IP
  10. medusa

    medusa Peon

    Messages:
    349
    Likes Received:
    14
    Best Answers:
    0
    Trophy Points:
    0
    #10
    Thats a really good advantage of floats that you have observed thre, Kalina.
     
    medusa, Sep 17, 2005 IP
  11. feha

    feha Active Member

    Messages:
    1,005
    Likes Received:
    7
    Best Answers:
    0
    Trophy Points:
    80
    #11
    Thank you for nice tips Arnica
     
    feha, Aug 30, 2006 IP