Centering the postions of a div .

  • kbergmann
  • Expert
  • Expert
  • User avatar
  • Posts: 659
  • Loc: USA

Post 3+ Months Ago

I have been researching this, on my day off, and can't get it down, been experimenting with code and the dang div won't center itself. It can't be that hard to center a div of a fixed length ....

I know with a table based design you use:

align="center" in the tag and viola, your table is centered.

I can't quite get a div to do that same thing. Well I found one way but it's not the CSS way! I put a table in that width and entered that into the html ... but ideally I want to nix this table.

I will keep researching but any suggestions? I am sure it is a simple piece of code I am missing.
  • kbergmann
  • Expert
  • Expert
  • User avatar
  • Posts: 659
  • Loc: USA

Post 3+ Months Ago

I got it to work in FF so I might be good :)I guess it needs to be a div within a div ...

Here's to nested div statements!

<div align="center">
<div class="outerbox">
test
</div></div>
  • Benat
  • Mastermind
  • Mastermind
  • User avatar
  • Posts: 2123

Post 3+ Months Ago

Are you using CSS? If so you do not need to do that, you need to use positioning through CSS.

Try this code (just change the width to your width)

Quote:
body
{
text-align: center
}

#content
{
text-align: left;
width: 700px;
margin: 0 auto
}
  • kbergmann
  • Expert
  • Expert
  • User avatar
  • Posts: 659
  • Loc: USA

Post 3+ Months Ago

I am using CSS ... I will try that out at work tommorow ... i did try the margin: 0 auto; and it didn't center it, but i didn't center the text on the body ... so we shall see.

Thank you for your input, I'll give you an update tomorrow while I test it out.

Hopefully the the fixed width goes unnoticed.

All I need to do now is find the right width so the whole thing will fit on a printed out page. I think 660 might be the max I can go without modifying printing margins. I really dislike when the ends of my sentences are cut off when I print, heh.
  • Benat
  • Mastermind
  • Mastermind
  • User avatar
  • Posts: 2123

Post 3+ Months Ago

If you need a print version, try this http://www.alistapart.com/articles/printyourway
  • kbergmann
  • Expert
  • Expert
  • User avatar
  • Posts: 659
  • Loc: USA

Post 3+ Months Ago

It works *I think* in FF 2.0.0.11 and IE 7 and IE 6 and Opera (the newest one).

Ironically enough, Opera gave me the most problems but the line height property corrected it.

Thank you for your help again.
  • kbergmann
  • Expert
  • Expert
  • User avatar
  • Posts: 659
  • Loc: USA

Post 3+ Months Ago

I think I now have the centered div down. I got it set up now so there are two columns centered underneath using some other centering advice I saw on the site.

This gives me a better base to attack the troublesome table layout I designed before I started learning CSS :)
  • xfahmix
  • Proficient
  • Proficient
  • User avatar
  • Posts: 326
  • Loc: Cork, Ireland

Post 3+ Months Ago

You can always use these layouts as your base layout design but remember, understanding the code are by far better in a long run.
  • xfahmix
  • Proficient
  • Proficient
  • User avatar
  • Posts: 326
  • Loc: Cork, Ireland

Post 3+ Months Ago

Latest article in TechRepublic How do I...Center a Web page layout using CSS?
  • ace5p1d0r
  • Expert
  • Expert
  • User avatar
  • Posts: 630
  • Loc: UK

Post 3+ Months Ago

Where you used:
Code: [ Select ]
align="center"

In your tabled layouts, just use:
Code: [ Select ]
style="margin:auto;"

For centering a DIV.
  • kbergmann
  • Expert
  • Expert
  • User avatar
  • Posts: 659
  • Loc: USA

Post 3+ Months Ago

I got the index page all polished up! Centered DIV, rounded corners, the works!

Once a few features get set up I will post the results.

Thank you all for you help.

Post Information

  • Total Posts in this topic: 11 posts
  • Users browsing this forum: No registered users and 13 guests
  • You cannot post new topics in this forum
  • You cannot reply to topics in this forum
  • You cannot edit your posts in this forum
  • You cannot delete your posts in this forum
  • You cannot post attachments in this forum
 
cron
 

© 1998-2014. Ozzu® is a registered trademark of Unmelted, LLC.