3 Replies - 505 Views - Last Post: 04 January 2011 - 08:36 AM

#1 RawrItsAdam  Icon User is offline

  • D.I.C Head
  • member icon

Reputation: 1
  • View blog
  • Posts: 72
  • Joined: 10-November 08

Setting a DIV

Posted 03 January 2011 - 06:21 PM

Hi there I'm currently starting a new project and come to my first hurdle, I'm trying to make a div align in the centre of the screen, but with no luck, here is the CSS I have so far:

div {
position:absolute;
width: auto;
padding: 10px;
border: 1px solid black;
margin: 10px;
}


Hope someone can help! :)

Is This A Good Question/Topic? 0
  • +

Replies To: Setting a DIV

#2 e_i_pi  Icon User is offline

  • = -1
  • member icon

Reputation: 801
  • View blog
  • Posts: 1,700
  • Joined: 30-January 09

Re: Setting a DIV

Posted 03 January 2011 - 10:15 PM

Not sure if this works in FF / Opera etc, but it should do...

<style>
div {
margin-right: 50%;
margin-left: 50%;
border: 1px solid black;
}
</style>
<div>
ABCD
</div>


Was This Post Helpful? 0
  • +
  • -

#3 Excavator  Icon User is offline

  • D.I.C Head
  • member icon

Reputation: 20
  • View blog
  • Posts: 60
  • Joined: 10-December 06

Re: Setting a DIV

Posted 04 January 2011 - 01:34 AM

Hello RawrItsAdam,
To center an element you need three things:
  • a valid DocType
  • an element with a width
  • that elements right/left margins set to auto


To further center it vertically takes a little more...
Have a look at a vertical centering demo.
Was This Post Helpful? 0
  • +
  • -

#4 mhollis  Icon User is offline

  • D.I.C Head

Reputation: 16
  • View blog
  • Posts: 61
  • Joined: 10-April 10

Re: Setting a DIV

Posted 04 January 2011 - 08:36 AM

View PostRawrItsAdam, on 03 January 2011 - 07:21 PM, said:

Hi there I'm currently starting a new project and come to my first hurdle, I'm trying to make a div align in the centre of the screen, but with no luck, here is the CSS I have so far:

div {
position:absolute;
width: auto;
padding: 10px;
border: 1px solid black;
margin: 10px;
}


Hope someone can help! :)


Firstly, what you have there is an absolute-positioned (or AP) div. While absolute positioning may be useful within the context of another <div> tag where the positioning is defined by the parent, I have found AP <div> tags to be a good way to get very lost, very quickly. Don't do that.

If you look at an AP div in a browser and then expand the browser window, it will retain its absolute positioning, based on coordinates that start at 0,0 on the upper left-hand corner of the browser window.

Use the box model with margin, padding and border to set up your divs. A really handy resource is this web page, which you should refer back to as you begin building pages.

To position a <div> tag centered within another <div> tag, I usually do the math. If the container for the <div> to be centered is 800 pixels (px) wide and the <div> I want centered in it is 400 pixels wide, I will do this in CSS (and in a separate stylesheet):

#container {
width: 800px;
}
#centeredDiv {
width: 400 px;
margin-left: 200px;
}

Then in HTML (assuming you have proper head tags, doctype declarations and a link to your stylesheet:

<div id="container">stuff that is in the 800px wide div goes here.
<div id="centeredDiv>stuff for the centered div goes here.</div>
more stuff within that 800px wide div can go here.
</div>

Now, what I did not do is define heights, backgrounds or any other objects for these <div> tags in CSS. But you will find that this method always works.

There is a way to "cheat" and cause elements to always be centered, but it can cause lots of problems. When you define your <body> in CSS, you can do the following:

body {
text-align: center;
}

What will happen is all <div> tags in the body of your document will be centered. Also, all text within them will be centered as well. So you will have to adjust everything you don't want centered. To my way of thinking, that's a bit of a pain, but this method will work.
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1