HTMLHelp Forums > center alignment DIV tags in CSS

Full Version: center alignment DIV tags in CSS

HTMLHelp Forums > Web Authoring > Cascading Style Sheets

s_connors

Apr 17 2007, 09:53 AM

Hello folks new at css so thanks for putting up with me, I'm just learning how to code in css its fun to learn hard to figure out what I don't know, LOL

what I want to to is align all my content in the center of the screen not really sure how to do that.

thanks in advance

Anywho so I have some real basic code::

<html>
<head>
<title>Test</title>

<style type="text/css">

div.content
{
width:800px
;
margin:0px

}

div.left
{
width:200px
;
float:left
;
padding:1em;
}

div.center
{
width:200px
;
margin-left:200px
;
padding:1em;
}

h1.sand

{

background-image:url('img/testbg.jpg')
;
width: auto
;
text-align: center
}

</style>

</head>

<body>
<div class="content">

<div class="left">
<h1 class="sand">Hello</h1>

this is some test text, wouldn't it be cool if this works eh? this is some test text, wouldn't it be cool if this works eh? this is some test text, wouldn't

it be cool if this works eh? this is some test text, wouldn't it be cool if this works eh? this is some test text, wouldn't it be cool if this works eh? this

is some test text, wouldn't it be cool if this works eh? this is some test text, wouldn't it be cool if this works eh? this is some test text, wouldn't it be

cool if this works eh? this is some test text, wouldn't it be cool if this works eh? this is some test text, wouldn't it be cool if this works eh? </div>

<div class="center">

<h1 class="sand">Hello</h1>

this is some test text, wouldn't it be cool if this works eh? this is some test text, wouldn't it be cool if this works eh? this is some test text, wouldn't

it be cool if this works eh? this is some test text, wouldn't it be cool if this works eh? this is some test text, wouldn't it be cool if this works eh? this

is some test text, wouldn't it be cool if this works eh? this is some test text, wouldn't it be cool if this works eh? this is some test text, wouldn't it be

cool if this works eh? this is some test text, wouldn't it be cool if this works eh? this is some test text, wouldn't it be cool if this works eh?

</div>

</div>
</body>

</html>

pandy

Apr 17 2007, 10:45 AM

CODE

.content { margin-left: auto; margin-right: auto }

A block box can be centered by giving it equal left and right margins. If the width of the box is known 'auto' can be used.

s_connors

Apr 17 2007, 11:55 AM

thank you for your timely response, one more question:::

would there be a reason why that wouldn't work in a IE browser?

Darin McGrew

Apr 17 2007, 12:10 PM

QUOTE(s_connors @ Apr 17 2007, 09:55 AM)

would there be a reason why that wouldn't work in a IE browser?

IIRC, MSIE supports the necessary CSS only when in "standards mode". When in "quirks mode", MSIE emulates older, even buggier versions of itself. See also Activating the Right Layout Mode Using the Doctype Declaration

And here are a couple additional references:
Centering things
Centring using CSS

pandy

Apr 17 2007, 02:05 PM

Yes, I should have mentioned that, sorry. If you want it centered in versions of IE older than 6 you need a workaround. The easiest is to use 'text-align: center' on a parent element. IE wrongly lets that affect block level elements.

CODE

body   { text-align: center;
         background: white }
#box   { width: 600px;
         margin-left: auto; margin-right: auto;
         text-align: left; / *have to reset it or
         text will be centered */
         background: red }

HTML

s_connors

Apr 18 2007, 08:22 AM

thank you guys, your a life saver

s_connors

Apr 18 2007, 09:42 AM

ok I'm sorry to keep pestering you but I'm stilling have probs

FF and IE are looking different even with the new code, I got things cented now IE the DIV tags aren't lining up. looking for help again, lol.

:::IE:::
IPB Image

:::FF:::

CODE

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>
<head>
<title>Test</title>

<style type="text/css">

body
{
text-align: center
;
background: white
}

#box
{
width: 600px
;
margin-left: auto
;
margin-right: auto
;
text-align: left
;
/ *have to reset it or text will be centered */
background: red
}

div.content
{
width: 800
;
height: 100%
;
margin-left: auto
;
margin-right: auto
;
border:1px dotted gray;
}

div.left
{
width:200px
;
float:left
;
padding:1em;
}

div.center
{
width:400px
;
margin-left:200px
;
padding:1em;
}

h1.sand

{

background-image:url('http://www.w3schools.com/css/bgdesert.jpg')
;
width: auto
;
text-align: center
}

h1.smile

{

background-image:url('http://www.myspacepicturecodes.com/myspace-graphics/myspace-graphics-backgrounds/myspace-codes-backgrounds-2.gif')
;
width: auto
;
text-align: center
}

</style>

</head>

<body>

<div id="box">

<div class="left">
<h1 class="sand">Hello</h1>

this is some test text, wouldn't it be cool if this works eh? this is some test text, wouldn't it be cool if this works eh? this is some test text, wouldn't

it be cool if this works eh? this is some test text, wouldn't it be cool if this works eh? this is some test text, wouldn't it be cool if this works eh? this

is some test text, wouldn't it be cool if this works eh? this is some test text, wouldn't it be cool if this works eh? this is some test text, wouldn't it be

cool if this works eh? this is some test text, wouldn't it be cool if this works eh? this is some test text, wouldn't it be cool if this works eh? </div>

<div class="center">

<h1 class="smile">Hello</h1>

this is some test text, wouldn't it be cool if this works eh? this is some test text, wouldn't it be cool if this works eh? this is some test text, wouldn't

it be cool if this works eh? this is some test text, wouldn't it be cool if this works eh? this is some test text, wouldn't it be cool if this works eh? this

is some test text, wouldn't it be cool if this works eh? this is some test text, wouldn't it be cool if this works eh? this is some test text, wouldn't it be

cool if this works eh? this is some test text, wouldn't it be cool if this works eh? this is some test text, wouldn't it be cool if this works eh? </div>

</div>

</body>

</html>

thank you again, I'm just very new at this.

john f

Apr 18 2007, 03:52 PM

div.content
{
width: 800
;........................}
width:800 ???

This is a "lo-fi" version of our main content. To view the full version with more information, formatting and images, please click here.