Help to align to the centre of the browser

HTML & CSS
1

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”

[B]<!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> [/B]

My CSS File is “Stylesheet.css”
[B]
#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;
}
[/B]

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

Hi, anumohan, welcome to the forums.

Check out this link.
http://www.456bereastreet.com/lab/centered/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 :slight_smile:

3

Thank you fr replying…but still its not working :frowning:

4

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.)


<!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

In case I misunderstood and you do not want the boxes in the middle of the window, this should work.


<!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

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 [U]html-validator[/U]! That’s the best to look at first, if something doesn’t work. :slight_smile:
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 [U]this result[/U]: “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:

<meta charset="utf-8">

I inserted it in the code of the original. That is:

Now the html-validator has [U]a different message[/U]: “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?

But the 3 blue blocks are still not centered…
We go over to the [U]css-validator[/U]. 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:

#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! :wink:
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
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. :slight_smile:

8

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

[ot]

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. :)[/ot]

10

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 


#left, 
#center,
#right {
  float:left;
  width: 300px;
  height:300px ;
  margin-right: 10px;
  margin-left: 10px;
  background-color: blue;
  border: 1px dotted fuchsia;  /*  DISPLAY DISTORTED */
  }

# Try adding a 1px OUTLINE 


#left, 
#center,
#right {
  float:left;
  width: 300px;
  height:300px ;
  margin-right: 10px;
  margin-left: 10px;
  background-color: blue;
  outline: 1px dotted fuchsia;   /* DISPLAY FORMATS OK */
  }
11

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! :slight_smile:

=======

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.”
    ([U]in the css2.1 specification[/U])

In case of the example page it didn’t hurt, but in fact I passed the [U]warning in #8[/U] 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 [U]this one[/U] in [URL=“http://netrenderer.com/”][U]Netrenderer[/U]).
  • And in 99% of the cases it was just <= IE7 that had the problems with the positioning and sudden dropping of elements! :slight_smile:
12

I wouldn’t write decent code without the HTML Validator plugin for Firefox. :slight_smile: The point that I didn’t articulate clearly is that an HTML5 doctype does not show any explanations for the warnings.

13

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

Same for me, I always strive for the green icon :slight_smile:

15

Ditto :slight_smile: