How to centre position CSS/div

**ParfaitMacaron** · Mar 2, 2013 20:56

Hi,

I'd like some help please on how I could position my header 1 in the light blue colour to fit in line with the banner (the black thing you see) for my CSS. I have tried googling but to no avail.

Picture 2.png

Thank you very much!

So far, I have got:

HTML Code:

	margin-left: auto;
	margin-right: auto;
	display: block;
        float: top;

**ronpat** · Mar 2, 2013 21:13

Hi, ParfaitMacaron, Welcome to the forums,

The image is still pending. Without seeing your HTML and CSS, which the image wouldn't show anyway, let me offer a possibility.

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<!--
http://www.sitepoint.com/forums/showthread.php?990327-How-to-centre-position-CSS-div
Thread: How to centre position CSS/div
2013.03.02 21:56
ParfaitMacaron
-->
<head>
    <title>template</title>
    <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
    <meta http-equiv="content-language" content="en-us">
    <style type="text/css">

h1 {
    background-color:black;
    color:lightblue;
    text-align:center;
    padding:12px;
}

    </style>
</head>
<body>

<h1>Header Text</h1>

</body>
</html>

PS: there is no such property as {float:top}

**ralph.m** · Mar 2, 2013 21:30

Also, auto right and left margins don't do anything unless the elements also has a set width (such as 800px or 80%, for example. Any units will do.)

**dresden_phoenix** · Mar 3, 2013 02:59

also:
there is no such thing as float:top; (only left | right | none) . If you were to float this element then margins-right/left:auto would not be applicable.
here ONE an example of what I think you are trying to accomplish.

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
    <title>template</title>
    <style type="text/css">

h1 {
    color:#000;
    text-align:center;
    padding:12px;
}

.header { background-color:lightblue; overflow: hidden}
.wrap{margin:0 auto; width:960px;}
.header img {float:right;}
.header h1 {float:left; margin:0;}
    </style>
</head>
<body>
		
<div class="header">
	<div class="wrap">
		<h1>Header Text</h1>
		<img src="image.jpg">
	</div>
</div>

</body>
</html>

to be honest , you ahve to take your whole code into consideration, as you should start to style only after you have structured your HTML around your content. ( for example... is the image content or deco rational, if it's content can it be considered part of the H1? ..etc etc..)
hope that helps

**ronpat** · Mar 3, 2013 04:37

Then there's the display:table technique that works in IE8+

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<!--
http://www.sitepoint.com/forums/showthread.php?990327-How-to-centre-position-CSS-div
Thread: How to centre position CSS/div
2013.03.02 21:56
ParfaitMacaron
-->
<head>
    <title>ParfaitMacaron</title>
    <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
    <meta http-equiv="content-language" content="en-us">
    <style type="text/css">

body {
    padding:0;
    margin:0;
}

div.header {
    display:table;
    table-layout:fixed;
    width:100%;
}
.header div {
    display:table-cell;
    background-color:#ffa;    /* for demo purposes */
    vertical-align:middle;
    text-align:center;
}
div + div,
img {
    width:250px;
}
img {
    height:150px;
    display:block;
    background-color:#ddd;    /* for demo purposes */
}
h1 {
    border:5px solid #000;
    background-color:#ade;
    color:#000;
    padding:8px;
    margin:0;
}

    </style>
</head>
<body>

<div class="header">
    <div><h1>Header Text</h1></div>
    <div><img src="image.jpg" alt="image"></div>
</div>

</body>
</html>

**ParfaitMacaron** · Mar 3, 2013 10:57

UPDATE: Just figured it out! I think you're all right in some ways!! It's because I didn't specify the width of my h1 that it stopped working when I was using the auto margin-left and margin-right!

Originally Posted by ronpat

Hi, ParfaitMacaron, Welcome to the forums,

The image is still pending. Without seeing your HTML and CSS, which the image wouldn't show anyway, let me offer a possibility.

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<!--
http://www.sitepoint.com/forums/showthread.php?990327-How-to-centre-position-CSS-div
Thread: How to centre position CSS/div
2013.03.02 21:56
ParfaitMacaron
-->
<head>
    <title>template</title>
    <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
    <meta http-equiv="content-language" content="en-us">
    <style type="text/css">

h1 {
    background-color:black;
    color:lightblue;
    text-align:center;
    padding:12px;
}

    </style>
</head>
<body>

<h1>Header Text</h1>

</body>
</html>

PS: there is no such property as {float:top}

Thank you for the welcome.

Can you see the image now by any chance? Thanks for telling me there's no float:top property! That's embarrassing I thought it existed. I tried to pad it out by 12px but it doesn't shrink to fit the 1000px width I've set (header banner image). The h1 I'm trying to set is supposed to be in line with the 1000px width of the header.

Originally Posted by ralph.m

Also, auto right and left margins don't do anything unless the elements also has a set width (such as 800px or 80%, for example. Any units will do.)

Thank you for your reply. I googled how to centre a div and found this website: http://www.thesitewizard.com/css/center-div-block.shtml It worked and I think that is because my wrapper is set to 1000px width.

Originally Posted by dresden_phoenix

also:
there is no such thing as float:top; (only left | right | none) . If you were to float this element then margins-right/left:auto would not be applicable.
here ONE an example of what I think you are trying to accomplish.

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
    <title>template</title>
    <style type="text/css">

h1 {
    color:#000;
    text-align:center;
    padding:12px;
}

.header { background-color:lightblue; overflow: hidden}
.wrap{margin:0 auto; width:960px;}
.header img {float:right;}
.header h1 {float:left; margin:0;}
    </style>
</head>
<body>
		
<div class="header">
	<div class="wrap">
		<h1>Header Text</h1>
		<img src="image.jpg">
	</div>
</div>

</body>
</html>

to be honest , you ahve to take your whole code into consideration, as you should start to style only after you have structured your HTML around your content. ( for example... is the image content or deco rational, if it's content can it be considered part of the H1? ..etc etc..)
hope that helps

Thank you for your help. I appreciate the code example. I have coded up my index page with the div classes but for some reason I still can't get it right. I've tried your suggestions. My wrap is like yours, the header img is at the top of the page (how I want it) but I need the Home Page bar to fit in line with the header img.

Originally Posted by ronpat

Then there's the display:table technique that works in IE8+

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<!--
http://www.sitepoint.com/forums/showthread.php?990327-How-to-centre-position-CSS-div
Thread: How to centre position CSS/div
2013.03.02 21:56
ParfaitMacaron
-->
<head>
    <title>ParfaitMacaron</title>
    <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
    <meta http-equiv="content-language" content="en-us">
    <style type="text/css">

body {
    padding:0;
    margin:0;
}

div.header {
    display:table;
    table-layout:fixed;
    width:100%;
}
.header div {
    display:table-cell;
    background-color:#ffa;    /* for demo purposes */
    vertical-align:middle;
    text-align:center;
}
div + div,
img {
    width:250px;
}
img {
    height:150px;
    display:block;
    background-color:#ddd;    /* for demo purposes */
}
h1 {
    border:5px solid #000;
    background-color:#ade;
    color:#000;
    padding:8px;
    margin:0;
}

    </style>
</head>
<body>

<div class="header">
    <div><h1>Header Text</h1></div>
    <div><img src="image.jpg" alt="image"></div>
</div>

</body>
</html>

Thank you for your help. I've tried to comment out some of my CSS and use a bit of your demo code but for some reason, I still can't get it to work.

**ronpat** · Mar 3, 2013 12:35

ParfaitMacaron,

The thing about HTML and CSS is that they work together. dresden_phoenix summed it up very nicely...

Originally Posted by dresden_phoenix

you ahve to take your whole code into consideration, as you should start to style only after you have structured your HTML around your content.

CSS and HTML not only depend on one another, they also depend on their own relatives, too. It takes a bit of experience before one learns how to copy bits and pieces from other code and use them in one's own.

For example, if you copy the full page examples presented above by dresden_phoenix or me, and paste them on a stand-alone page, they will all work. Each example is a stand-alone unit.

As your knowledge grows, you will learn how to selects features from one page and apply them to your own. In the beginning, before dismissing our examples as unworkable, be sure to give them a look on their own pages to see what we are demonstrating.

Everything exists in the context of its surroundings.

If you can post a link to your page, we will be happy to offer some guidance. Or, if you can post your HTML and CSS in a message, we can work with that, too. In your message, type

[code]

then paste your code here

[/code]

That will put it in a box with scroll bars (like ours above) and preserve formatting.

Without being able to see your code, everything we can offer at this stage is a "guess".

Best of luck!

User Tag List

Thread: How to centre position CSS/div

Thread Tools

Display

How to centre position CSS/div

Bookmarks

Bookmarks

Posting Permissions