SitePoint Sponsor

User Tag List

Results 1 to 15 of 15
  1. #1
    SitePoint Member anumohan's Avatar
    Join Date
    Nov 2013
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    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
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,518
    Mentioned
    61 Post(s)
    Tagged
    2 Thread(s)
    Hi, anumohan, welcome to the forums.

    Check out this link.
    http://www.456bereastreet.com/lab/ce...display-table/

    Add your content and css to the code in that link and your content should be left-aligned and vertically in the middle of the window.

    PS: please click on the blue link at the bottom of my post and read our guidelines for posting code. Thanks

  3. #3
    SitePoint Member anumohan's Avatar
    Join Date
    Nov 2013
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you fr replying.....but still its not working

    Quote Originally Posted by ronpat View Post
    Hi, anumohan, welcome to the forums.

    Check out this link.
    http://www.456bereastreet.com/lab/ce...display-table/

    Add your content and css to the code in that link and your content should be left-aligned and vertically in the middle of the window.

    PS: please click on the blue link at the bottom of my post and read our guidelines for posting code. Thanks

  4. #4
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,518
    Mentioned
    61 Post(s)
    Tagged
    2 Thread(s)
    You did not describe how it does not work.

    Copy the following code to a file and open it in your browser. The blue boxes will be in the middle of the window vertically and left aligned (because they are floated left).
    (See Edit comment below.)
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
        <meta http-equiv="content-type" content="text/html; charset=utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>middled content</title>
    <!--
    http://www.sitepoint.com/forums/showthread.php?1179362-help-to-align-to-the-centre-of-the-browser
    Thread: help to align to the centre of the browser
    2013.11.22 17:59
    anumohan
    -->
        <style type="text/css">
    
    html,
    body {
        width:100%;
        height:100%;
        margin:0;
        padding:0;
    }
    html {display:table;}
    body {
        display:table-cell;
        vertical-align:middle;
    }
    #body {
        max-width:50em;
        margin:0 auto;
    }
    
    #Container {
        text-align:center;
        margin: auto;
        width: 1200px;
    }
    
    #left {
        background-color: blue;
        height:300px ;
        width: 300px;
        display:inline-block;
        margin-right: 10px;
        margin-left: 10px;
    }
    
    #center {
        background-color: blue;
        height:300px ;
        width: 300px;
        display:inline-block;
        margin-right: 10px;
        margin-left: 10px;
    }
    
    #right {
        background-color: blue;
        height:300px ;
        width: 300px;
        display:inline-block;
        margin-right: 10px;
        margin-left: 10px;
    }
    
        </style>
    </head>
    <body>
    
    <div id="Container">
        <div id="left"></div>
        <div id="center"></div>
        <div id="right"></div>
    </div>
    
    </body>
    </html>
    EDIT: Changes made. There are smart quotes in the HTML around the id "Container". They should be changed to ordinary "dumb quotes". Also changed the boxes from floats to inline-block.

  5. #5
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,518
    Mentioned
    61 Post(s)
    Tagged
    2 Thread(s)
    In case I misunderstood and you do not want the boxes in the middle of the window, this should work.
    Code:
    <!doctype html>
    <html>
    <head>
        <title>Test</title>
        <link rel="stylesheet" href="stylesheet.css"/>
        <style type="text/css">
    #Container {
        width:1200px;
        text-align:center;
    }
    #left,
    #center,
    #right {
        display:inline-block;
        background-color:blue;
        height:300px;
        width:300px;
        margin-right:10px;
        margin-left:10px;
    }
        </style>
    </head>
    <body>
    
    <div id="Container">
        <div id="left"></div>
        <div id="center"></div>
        <div id="right"></div>
    </div>
    
    </body>
    </html>

  6. #6
    SitePoint Evangelist silver trophybronze trophy
    Join Date
    Jul 2013
    Posts
    406
    Mentioned
    22 Post(s)
    Tagged
    0 Thread(s)
    Hi anumohan,
    Yes, rontpat's code is good working (it's an other model; often there are more models possible in css).

    But in theory the model of your starting post is also good, only there are some errors in.

    We go bug hunting with the help of the html-validator! That's the best to look at first, if something doesn't work.
    I pasted your original code in a html-file; the css I transported to a style-block in the <head> of the document. That is:


    The html-validator has this result: "Error found" > "No Character Encoding Found!"
    This means: there is a <meta>tag missing with the "charset": the way a browser must interpret all characters of the file.
    The best is to use the universal "utf-8", then for html5 the code (to be placed at the very beginning) is:
    Code:
    <meta charset="utf-8">
    I inserted it in the code of the original. That is:


    Now the html-validator has a different message: "Sorry! This document cannot be checked."
    Happily they said why not : "on line 43 it contained one or more bytes that I cannot interpret as utf-8".
    So there must be invalid characters in line 42. Line 42 is:
    <div id=Container>
    Aha, the curly quote signs have to be straight ones (ronpat said it already in post #4), like in the rest of the code:
    <div id="Container">
    Corrected in the original; that is:


    What does the html-validator say now?
    • HTML checked. Ha, the html is OK. The basis for a working page is aboard.

    But the 3 blue blocks are still not centered...
    We go over to the css-validator. Is there perhaps an error in the css?

    Conclusion: then it must be something in the values of the css itself.
    To discover it, it's always handy to give a small border around container-div's, so you can see where they are.
    I added:
    Code:
    #Container{
        ...
        border: 1px dotted fuchsia;
        overflow: hidden; /* to see the border around floated inside elements */
        }
    That is:


    It happens that the #Container is perfectly centered in the page by its {margin: auto;}, but the #Container is too large on the right side. And the 3 blocks are floating left, so they aren't centered.
    Algebra!
    3 blocks of 300px width, plus 10px margin-left and 10px margin-right ===> 3 x 320px = 960px

    There we are: a width of 960px instead of 1200px for the #Container. That is:



    The validators are invaluable!

  7. #7
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,518
    Mentioned
    61 Post(s)
    Tagged
    2 Thread(s)
    Off Topic:

    A very nice walk-through of a systematic method of trouble diagnosis, @Francky . I have not been paying adequate attention to the warnings and overlooked the missing character encoding declaration, so your description includes a good lesson for me, too. Thanks.

  8. #8
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,366
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by ronpat View Post
    Off Topic:

    A very nice walk-through of a systematic method of trouble diagnosis, @Francky . I have not been paying adequate attention to the warnings and overlooked the missing character encoding declaration, so your description includes a good lesson for me, too. Thanks.
    I use this Firefox extension so you can see html errors in the toolbar at the bottom as you work and saves running to the html validator to check.

  9. #9
    Life is not a malfunction gold trophysilver trophybronze trophy
    TechnoBear's Avatar
    Join Date
    Jun 2011
    Location
    Argyll, Scotland
    Posts
    6,199
    Mentioned
    264 Post(s)
    Tagged
    5 Thread(s)
    Off Topic:

    Quote Originally Posted by Paul O'B View Post
    I use this Firefox extension so you can see html errors in the toolbar at the bottom as you work and saves running to the html validator to check.
    Thanks for that link, Paul. I used to use this extension, but when I switched to Linux, I found it wasn't available and I really missed it. That's made my day, discovering I can finally get it back.

  10. #10
    SitePoint Mentor bronze trophy
    John_Betong's Avatar
    Join Date
    Aug 2005
    Location
    City of Angels
    Posts
    1,834
    Mentioned
    73 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by Francky View Post
    ...
    ...
    ...
    Conclusion: then it must be something in the values of the css itself.
    To discover it, it's always handy to give a small border around container-div's, so you can see where they are.
    I added:
    Code:
    #Container{
        ...
        border: 1px dotted fuchsia;
        overflow: hidden; /* to see the border around floated inside elements */
        }
    ...
    ...
    ...
    Somewhere I read that using border is OK in most cases but if used where margins are internal the display may become distorted:

    # Try adding a 1px BORDER
    PHP Code:
    #left, 
    #center,
    #right {
      
    float:left;
      
    width300px;
      
    height:300px ;
      
    margin-right10px;
      
    margin-left10px;
      
    background-colorblue;
      
    border1px dotted fuchsia;  /*  DISPLAY DISTORTED */
      

    # Try adding a 1px OUTLINE
    PHP Code:
    #left, 
    #center,
    #right {
      
    float:left;
      
    width300px;
      
    height:300px ;
      
    margin-right10px;
      
    margin-left10px;
      
    background-colorblue;
      
    outline1px dotted fuchsia;   /* DISPLAY FORMATS OK */
      

    Last edited by John_Betong; Nov 23, 2013 at 07:15. Reason: spelling: not my fortay
    Learn how to be ready for The New Move to Discourse

    How to make Make Money Now with a *NEW* look

    Be sure to congratulate Patche on earning Member of the Month for July 2014

  11. #11
    SitePoint Evangelist silver trophybronze trophy
    Join Date
    Jul 2013
    Posts
    406
    Mentioned
    22 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    I use this Firefox extension so you can see html errors in the toolbar at the bottom as you work and saves running to the html validator to check.
    Yep, this extension is added to the "View source code" button in FF. - Since many years it's the first thing I do after installing a fresh Firefox, and I don't dwell upon that later on.
    An other benefit is that the explication of errors and warnings is often more "human language" than the rather mystical technical wordings of the html-validator.
    Also sometimes some other/more tips are given than the online html-validator is telling.
    • Using them both is delivering splendid code!

    =======
    Quote Originally Posted by John_Betong View Post
    Somewhere I read that using border is OK in most cases but if used where margins are internal the display may become distorted
    Yes, you are completely right.
    An outline doesn't have influence on the design, while a border (with extra px) can destroy it:
    • "The outline created with the outline properties is drawn "over" a box, i.e., the outline is always on top, and does not influence the position or size of the box, or of any other boxes. Therefore, displaying or suppressing outlines does not cause reflow or overflow."
      (in the css2.1 specification)

    In case of the example page it didn't hurt, but in fact I passed the warning in #8 of my "Golden Rules of CSS".
    • The reason why is advised over there (in 2006) to use a distinctive background-color (instead of the outline property) is that in Internet Explorer 7 and before the outline is not displayed on screen (see this one in Netrenderer).
    • And in 99% of the cases it was just <= IE7 that had the problems with the positioning and sudden dropping of elements!

  12. #12
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,518
    Mentioned
    61 Post(s)
    Tagged
    2 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    I use this Firefox extension so you can see html errors in the toolbar at the bottom as you work and saves running to the html validator to check.
    I wouldn't write decent code without the HTML Validator plugin for Firefox. The point that I didn't articulate clearly is that an HTML5 doctype does not show any explanations for the warnings.

    HTML5-HTMLValidator.gif

  13. #13
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,366
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by ronpat View Post
    I wouldn't write decent code without the HTML Validator plugin for Firefox. The point that I didn't articulate clearly is that an HTML5 doctype does not show any explanations for the warnings.

    HTML5-HTMLValidator.gif
    I usually keep the doctype to html 4,01 and then change it at the last minute (if the client wants html5 - although I rarely use the new html5 tags).

  14. #14
    SitePoint Mentor bronze trophy
    John_Betong's Avatar
    Join Date
    Aug 2005
    Location
    City of Angels
    Posts
    1,834
    Mentioned
    73 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    I usually keep the doctype to html 4,01 and then change it at the last minute (if the client wants html5 - although I rarely use the new html5 tags).
    Same for me, I always strive for the green icon
    Learn how to be ready for The New Move to Discourse

    How to make Make Money Now with a *NEW* look

    Be sure to congratulate Patche on earning Member of the Month for July 2014

  15. #15
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,518
    Mentioned
    61 Post(s)
    Tagged
    2 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    I usually keep the doctype to html 4,01 and then change it at the last minute (if the client wants html5 - although I rarely use the new html5 tags).
    Ditto


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
  •