How can i make coloumn like this with css?

Discussion in 'HTML & Website Design' started by SNaRe, Jul 17, 2007.

0
  1. #1
    http://www.ajaxlessons.com/
    enter to it's footer part you will see post listings. It'S 3 coloumn. How can i make 3 coloumn with css
    ?
     
    SNaRe, Jul 17, 2007 IP
  2. kazooki

    kazooki Guest

    Messages:
    88
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #2
    kazooki, Jul 17, 2007 IP
  3. convertor

    convertor Peon

    Messages:
    34
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #3
    <html>
    <head>
    <style type="text/css">
    #container
    {
    margin:20px auto;
    width:780px;
    }
    #header
    {
    background:#ddd;
    }
    #left
    {
    float:left;
    width:260px;
    background:#f3f3f3;
    }
    #center
    {
    float:left;
    width:260px;
    background:#f6f6f6;
    }
    #right
    {
    float:left;
    width:260px;
    background:#f9f9f9;
    }
    .clean
    {
    clean:left;
    }
    #footer
    {
    background:#ddd;
    }

    </style>
    </head>
    <body>
    <div id="container">
    <div id="header">
    header
    </div>
    <div id="left">
    left
    </div>
    <div id="center">
    center
    </div>
    <div id="right">
    right
    </div>
    <div class="clean">
    </div>
    <div id="footer">
    footer
    </div>
    </div>
    </body>
    </html>
     
    convertor, Jul 18, 2007 IP
  4. Stomme poes

    Stomme poes Peon

    Messages:
    3,195
    Likes Received:
    136
    Best Answers:
    0
    Trophy Points:
    0
    #4
    kazooki,
    I looked at one of the examples/templates on that site, and found this:

    
<style type="text/css">
img{border:none;}
#masthead{height:100px; background-color:#827264;margin:0px; padding:0px;}
.main{height:300px; background-color:#CFCD9F; border-top:#FFFFFF 2px solid;margin:0px; padding:0px;}
#secondary{height:300px; background-color:#CFB59F; border-top:#FFFFFF 2px solid;margin:0px; padding:0px;}
#secondaryFull{height:50px; background-color:#CFB59F; border-top:#FFFFFF 2px solid;margin:0px; padding:0px;}
#footer{height:50px; background-color:#828164; border-top:#FFFFFF 2px solid;margin:0px; padding:0px;}
.googleAds{text-align:center;}
</style>
    Code (markup):
    Instead of listing maring:0; padding:0; for each section, couldn't he have just made one * {margin:0; padding:0; } at the top first? If not, why not?

    I dunno, I need to learn why people do stuff and why they don't, so I'm curious.
     
    Stomme poes, Jul 18, 2007 IP