#1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Nov 2013
    Posts
    1
    Rep Power
    0

    Help to align to the centre of the browser


    Need a help in using CSS with PHP File

    I created a Php File to create Div's (three blue boxes) and I want to align the boxes to the centre of the browser in a same row.

    My Php File is "index.php"

    <!doctype html>

    <head>
    <title>Test</title>
    <link rel="stylesheet" href="stylesheet.css"/>
    </head>

    <body>
    <div id=”Container”>
    <div id="left"></div>
    <div id="center"></div>
    <div id="right"></div>
    </div>
    </body>

    </html>


    My CSS File is "Stylesheet.css"

    #Container{
    margin: auto;
    width: 1200px;
    }

    #left{
    background-color: blue;
    height:300px ;
    width: 300px;
    float:left;
    margin-right: 10px;
    margin-left: 10px;
    }

    #center{
    background-color: blue;
    height:300px ;
    width: 300px;
    float:left;
    margin-right: 10px;
    margin-left: 10px;
    }

    #right{
    background-color: blue;
    height:300px ;
    width: 300px;
    float:left;
    margin-right: 10px;
    margin-left: 10px;
    }



    I have tried to remove "float: left;", but then boxes are coming one by one in the next row, I mean not in the same row.

    Please help. I want to know how to align it in the same row to the centre of the website.

    Thanks in advance.
  2. #2
  3. No Profile Picture
    Contributing User
    Devshed Novice (500 - 999 posts)

    Join Date
    Oct 2009
    Location
    Nebraska, USA
    Posts
    876
    Rep Power
    275
    give this a try and see if its what you are going for:

    Code:
    <!doctype html>
    
    <head>
    <title>Test</title>
    <style type="text/css">
    html, body{margin:0;padding:0;}
    
    #Container{
    margin: 0 auto;
    width: 1200px;
    overflow:auto;
    background:yellow;
    }
    
    .box{
    background-color: blue;
    height:300px;
    width: 300px;
    float:left;
    margin:10px 0; /*top/bottom margin of 10px and left/right margin of 0 */
    margin-left:75px; 
    /* margin-left is calculated by
    (width-of-container - totalwidth-of-the-3-boxes)/number-of-spaces-between-the-boxes
    in this case (1200 - 900)/4 or 300/4 or 75 */
    }
    
    </style>
    </head>
    
    <body>
    <div id="Container">
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    </div>
    </body>
    
    </html>
    the background:yellow in #Container is just there to allow you to "see" the spacing of the boxes.

IMN logo majestic logo threadwatch logo seochat tools logo