HTML DIV Based Page Design Issue

Discussion in 'HTML & Website Design' started by mudgil.gaurav, Oct 14, 2008.

0
  1. #1
    Hi All,

    I am not use to work with HTML/CSS , I want to design a page that will be having header , left col , body , right col and footer. I am design this page using div. My HTML is life this

    <div id='header'>HEADER</div>
    <div id='main-container'>
    <div id='left-col'>LEFT COL</div>
    <div id='body-col'>BODY</div>
    <div id='right-col'>RIGHT COL</div>
    </div>
    <div id='footer'>FOOTER</div>

    But in my 'min-container' div are not coming one upone each other. like first left col then below it is body then below body right col. but i want all three to be align in same line.

    Please suggest.
     
    mudgil.gaurav, Oct 14, 2008 IP
  2. kreativi

    kreativi Peon

    Messages:
    89
    Likes Received:
    4
    Best Answers:
    0
    Trophy Points:
    0
    #2
    you have to use float attribute with left-col, body-col and right-col. That will solve the problem for sure. Also define their widths.
     
    kreativi, Oct 14, 2008 IP
  3. mudgil.gaurav

    mudgil.gaurav Peon

    Messages:
    3
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #3
    Hi kreativi

    Thanks for your reply i am using the css according to your suggestion

    #left-col{
    float:left;
    width:150px;

    }
    #body-col{
    float:left;
    width:570px;

    }
    #right-col{
    float:right;
    width:150px;
    }

    but still there is no effect.
     
    mudgil.gaurav, Oct 15, 2008 IP
  4. kreativi

    kreativi Peon

    Messages:
    89
    Likes Received:
    4
    Best Answers:
    0
    Trophy Points:
    0
    #4
    <html>
    <head>
    <style type="text/css">
    <!--
    #left-col{
    float: left;
    width:150px;

    }
    #body-col{
    float: left;
    width:570px;

    }
    #right-col{
    float: right;
    width:150px;
    }
    #footer{
    clear: both;
    }
    -->
    </style>
    </head>

    <body>
    <div id='header'>HEADER</div>
    <div id='main-container'>
    <div id='left-col'>LEFT COL</div>
    <div id='body-col'>BODY</div>
    <div id='right-col'>RIGHT COL</div>
    </div>
    <div id='footer'>FOOTER</div>
    </body>
    </html>


    Check this code. It will display left, center and right in the same line.
     
    kreativi, Oct 15, 2008 IP
  5. leebari

    leebari Peon

    Messages:
    50
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #5
    This kind of layout is called liquid template. Google for "liquid template layouts" and you fill find many examples on how to achieve div based columns without fixing column size (so that they would stretch according to window size).

    Regards.
     
    leebari, Oct 2, 2009 IP