SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    Get my greedy down dotJoon's Avatar
    Join Date
    Apr 2003
    Location
    daejeon, South Korea
    Posts
    2,223
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    make a div center-positioned in a wrapper div

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>3 columns</title>
    <style type="text/css"> 
     body{
    margin:0;
    padding:0;
    } 
    #centerwrapper{
    float: left;
    width: 100%;
    }
    #centercolumn{
    margin: 0 200px 0 230px; 
    background-color:pink;
    }
     #leftcolumn{
    float: left;
    width: 230px; /*Width of left column*/
    margin-left: -100%;
    background: yellow;
    }
     #rightcolumn{
    float: left;
    width: 200px;
    margin-left: -200px; 
    background: green;
    }
    </style>
    </head>
    <body>
    <div id="centerwrapper">
      <div id="centercolumn">
        center column
      </div>
    </div>
     
    <div id="leftcolumn">
    left column
    </div>
     
    <div id="rightcolumn">right column</div>
     
    </body>
    </html>
    http://dot.kr/x-test/3colsLayout.php has the code above.
    I like to put the text "center column" in a new blue block of width:300px and make the blue block to be centered of the centercolumn div which is pink block.

    I made the code below for it.
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>3 columns</title>
    <style type="text/css"> 
     
    body{
    margin:0;
    padding:0;
    }
     
    #centerwrapper{
    float: left;
    width: 100%;
    }
     
    #centercolumn{
    margin: 0 200px 0 230px; 
    background-color:pink;
    }
     
    #leftcolumn{
    float: left;
    width: 230px; /*Width of left column*/
    margin-left: -100%;
    background: yellow;
    }
     
    #rightcolumn{
    float: left;
    width: 200px;
    margin-left: -200px; 
    background: green;
    }
    </style>
    </head>
    <body>
    <div id="centerwrapper">
      <div id="centercolumn" style="text-align:center">
        <div style="background-color:blue;width:300px">center column</div>
      </div>
    </div>
     
    <div id="leftcolumn">
    left column
    </div>
     
    <div id="rightcolumn">right column</div>
     
    </body>
    </html>
    I want a new blue div block is at the center of the pink div block.
    But the blue block is on the left of the pink div block.at http://dot.kr/x-test/3colsLayout1.php

    How can I make a new blue div block to be centered of the pink centercolumn div block?

  2. #2
    Mazel tov! bronze trophy kohoutek's Avatar
    Join Date
    Aug 2004
    Location
    Hamburg, Germany
    Posts
    4,248
    Mentioned
    30 Post(s)
    Tagged
    0 Thread(s)
    Set the blue <div> to margin:auto; and it'll be centered.
    Maleika E. A. | Rockatee | Twitter | Dribbble




Bookmarks

Posting Permissions

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