www.webdeveloper.com
Results 1 to 7 of 7

Thread: Div tags

  1. #1
    Join Date
    May 2013
    Posts
    55

    Div tags

    Hello, I have a div tag named 'container' and three other div tags in it. How can I center those 3 div tags in 'container' div?

  2. #2
    Join Date
    Mar 2011
    Posts
    1,136
    We need more details to help you. Post your code and explain exactly what you're trying to do.
    Rick Trethewey
    Rainbo Design

  3. #3
    Join Date
    May 2013
    Posts
    55
    css code:
    body
    {
    background-color:#003;
    font-size:100%;
    margin:0;
    padding:0;
    }
    #header
    {
    margin-top:-20px;
    margin-bottom:-20px;
    color:#FC0;
    background-color:#003;
    }
    #link
    {
    border-top:1px solid;
    border-bottom:1px solid;
    margin-top:0px;
    padding-top:0.5em;
    padding-bottom:0.5em;
    background-color:#FC0;
    }
    #container
    {
    width:80%;
    margin:0 auto;
    background-color:#FFF;
    overflow:hidden;
    height:100%;
    }
    #columnleft
    {
    margin-left:4%;
    border-right:1px solid;
    margin-top:0;
    width:28%;
    background-color:#CCC;
    float:left;
    padding:1em;
    text-align:justify;
    overflow:hidden;
    }
    #columnmain
    {
    border-right:1px solid;
    margin-top:0px;
    width:28%;
    background-color:#CCC;
    float:left;
    padding:1em;
    text-align:justify;
    overflow:hidden;
    }
    #columnright
    {
    margin-top:0px;
    width:28%;
    background-color:#FFF;
    float:left;
    padding:1em;
    overflow:hidden;
    text-align:justify;
    }
    .article
    {
    background-color:#FFF;
    padding:0px 0.5em 0.5em 0.5em;
    border:1px solid;
    border-color:#CCC;
    margin-top:10px;
    }
    h2
    {
    background-color:#333;
    color:#FC0;
    }
    img
    {
    width:100%;
    }
    #topics
    {
    color:#FFF;
    background-color:#999;
    padding:0.5em;
    }
    #posts
    {
    color:#FFF;
    background-color:#999;
    padding:0.5em;
    }
    p
    {
    margin:0.5em 0 0.5em 0
    }
    .head
    {
    color:#CC0;
    }
    #link a:link
    {
    color:#000;
    }
    #link a:visited
    {
    color:#000;
    }
    #link a:hover
    {
    color:#FFF;
    }
    #topics a:link
    {
    color:#FFF;
    }
    #topics a:visited
    {
    color:#FFF;
    }
    #topics a:hover
    {
    color:#FC0;
    }
    .head a:link
    {
    color:#FC0;
    }
    .head a:visited
    {
    color:#FC0;
    }
    .head a:hover
    {
    color:#FC0;
    }
    a:link
    {
    color:#66C;
    }
    a:visited
    {
    color:#66C;
    }
    a:hover
    {
    color:#FC3;
    }
    'columnleft' , 'columnmain' and 'columnright' are inside the 'container' div tag. What can I do to make 'columnleft' ,'columnmain' and 'columnright' appear in the center of the 'container' tag?

  4. #4
    Join Date
    Jan 2004
    Location
    chertsey, a small town s.w. of london, england.
    Posts
    1,460
    Hi there Harith,

    try it like this...
    Code:
    
    <!DOCTYPE html>
    <html lang="en">
    <head>
    
    <meta charset="utf-8">
    
    <title>untitled document</title>
    
    <style>
    html,body {
        height:100%;
        margin:0;
        padding:0;
        background-color:#003;
        font-size:100%;
     }
    #container {
        width:80%;
        height:100%;
        margin:auto;
        background-color:#fff;
        text-align:justify;
     }
    #columnleft {
        float:left;
        width:28%;
        height:100%;
        margin-left:8%;
        background-color:#ccc;
     }
    #leftinner,#maininner,#rightinner {
        height:100%;
        padding:0 1em;
        overflow:auto;
        box-shadow:inset 0 0 12px #444;
        font-size:0.9em;
     }
    #columnmain {
        float:left;
        width:28%;
        height:100%;
        background-color:#ccc;
     }
    #maininner {
        border-right:1px solid #000;
        border-left:1px solid #000;
     }
    #columnright {
        float:left;
        width:28%;
        height:100%; 
        background-color:#ccc;
     }
    </style>
    
    </head>
    <body>
    
    <div id="container">
    
    <div id="columnleft">
    <div id="leftinner">
    <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec 
    ultricies sollicitudin nisi, ut molestie felis adipiscing sit 
    amet. Sed auctor vehicula commodo. Nam a nibh neque, vitae 
    faucibus felis. Vivamus at metus eget eros consequat fringilla. 
    </p><p>
    Quisque magna magna, laoreet eu tempus sit amet, fringilla at 
    tellus. Praesent felis tortor, scelerisque vitae fringilla 
    non, porttitor et lacus. Ut ut sapien nec quam tincidunt 
    consectetur in nec lacus.
    </p>
    </div><!-- end #leftinner -->
    </div><!-- end #columnleft -->
    
    <div id="columnmain">
    <div id="maininner">
    <p>
    Phasellus porta, dui a elementum egestas, odio sapien rhoncus 
    lorem, vitae bibendum erat sem eget sapien. Maecenas ut metus 
    ac quam pellentesque lacinia quis sit amet augue. Fusce eu 
    euismod urna. Nunc volutpat scelerisque tempus. Donec eget arcu 
    et mauris scelerisque tristique. Donec fringilla mauris dolor. 
    </p><p>
    Sit amet vulputate lacus. Nulla feugiat mattis nulla non 
    tincidunt. Nam sit amet dolor eros, a viverra lacus. Nunc quis 
    nisi eget neque tempus facilisis eu quis sapien.
    </p>
    </div><!-- end #maininner -->
    </div><!-- end #columnmain -->
    
    <div id="columnright">
    <div id="rightinner">
    <p>
    Ut et metus a massa rhoncus cursus. Integer luctus luctus enim, 
    tristique rhoncus enim feugiat eu. Etiam porttitor volutpat 
    massa sed congue. Sed eros nisl, volutpat ac dapibus quis, 
    ultricies id diam. Mauris at elit eget quam ullamcorper sagittis.
    </p><p> 
    Ac vel lorem. Ut nec justo libero. Phasellus eget pharetra elit. 
    Proin viverra, neque non eleifend vehicula, nulla augue gravida 
    felis, non fermentum lorem odio ac nunc. Aliquam pretium 
    scelerisque consectetur. Proin ultrices urna non magna interdum.
    </p><p> 
    A sodales turpis suscipit. Mauris sollicitudin nisl ac arcu 
    sodales cursus. Maecenas bibendum neque vitae orci mollis ac 
    vulputate ante auctor. Sed sodales odio id ante sagittis 
    faucibus.
    </p>
    </div><!-- end #rightinner -->
    </div><!-- end #columnright -->
    
    </div><!-- end #container -->
    
    </body>
    </html>
    coothead

  5. #5
    Join Date
    May 2013
    Posts
    55
    I have put it in center using margin value, I just wanted to see if there is a code for it so that it can fit in all screen resolutions. But thanks you just gave me a new code 'box-shadow:inset 0 0 12px #444;'

  6. #6
    Join Date
    Jan 2004
    Location
    chertsey, a small town s.w. of london, england.
    Posts
    1,460

    No problem, you're very welcome.

    coothead

  7. #7
    Join Date
    May 2013
    Posts
    119
    You need to set margin for inner div.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles