centering a div box?

airbornflght · January 2006

Okay, I am making a css stylesheet and site for my internet services class. Ive taken the class before and Mr. sacket is just giving me some projects that need to be done for the district, and he wants a site to go over the use of cmaps. a program we use quite a bit. I have two classes made for a "textbox". I'll paste the code here.

My problem is postioning the bastards. Im trying to either get these things positioned to a place on the page or just center them on the page(easier?).

div.scrollbox 
{
background-color:#FFFFCC;
width:450px;
height:200px;
border: dotted #000066 thin;
overflow: scroll

}


div.scrollboxsmall 
{
background-color:#FFFFCC;
width:250;
height:150px;
border: dotted #000066 thin;
overflow: scroll

}

this is as far as I've been able to go, I cant figure out the positioning, cause with absolute positioning, if a user made the browser smaller than maximized, or didnt use 1024x768 the box would be thrown out of place. I'm also trying to get my text positioned too, I will be using h1, h2 and p tags on the site.

could I use a relative tag, or would that be thrown off too? what I did is make an image that is around 700x40, and set that to repeat down the y axis

body 
{background: #000000 url('pics/bg.gif') repeat-y fixed center;}

so I have a black background behind this image. here is what the site looks like so far.(****ty) im trying to get this stylesheet done, cause he's made us a team, and made me the team leader, and im trying to get this style-sheet made so that I can make it external and make a little word doc that explains everything thats in it so that the others dont have to do a bunch of coding each time, all they'll/I'll have to do is import the style-sheet.

here is a link to the site so far, all ive been able to really do is get the background made. Im gonna try and make it look professional, and use my districts colors. concept maps site

the banner isnt done, I want to get the colors of the site down pat before i commit to anything on the banner.

airbornflght · January 2006

no one?

RWB · January 2006

If I could remember it off hand, I'd tell you. Right now I wanna say that it can't be done.... easily at least. You might be better off centering it all with a simple table.

Check out this link

http://short-media.com/forum/showthread.php?t=6302&highlight=center+div

airbornflght · January 2006

I'll just put it in a table, I feel kinda stupid for not thinking of that my self.

RWB · January 2007

I know this is OLD AS HELL but I saw this thread just now as I was searching for a display tag question I posted a while back and figured others might like to see the fix. The important items are
[PHP]text-align: center;[/PHP]
for the body tag... and...

[PHP]margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;[/PHP]
For the container tag.

[PHP]<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">

</style>
</head>

<body>
<div id="container">
<p>Content</p>
</div>
</body>
</html>[/PHP]

nonstop301 · January 2007

Even without a table you can just use

< div align="center" class="scrollbox" >
hey, this is a scroll box. hey, this is a scroll box.
hey, this is a scroll box. hey, this is a scroll box.
hey, this is a scroll box. hey, this is a scroll box.
hey, this is a scroll box. hey, this is a scroll box.
hey, this is a scroll box. hey, this is a scroll box.
hey, this is a scroll box. hey, this is a scroll box.
< /div >

after the < style >...< /style > dialog

jared · January 2007

the correct way to center a div element is to apply the auto margin.

using align=center is the depreciated method.

#box {
 width: 200px;
 margin: 0 auto;
 }

// the margin/padding command can be cut down to
 margin: top right bottom left;

cheers

centering a div box?

Comments