"Top" style is not working in my CSS

**deotpit** · Mar 18, 2012 02:14

Hi everyone.
I wanted my "div" to move down to the vertical middle of my page but it doesn't do so. It stays solid
at the top of the page ! This is the code:

Code:

<style type="text/css">  
  div#startpage
    {
      width:960px;
      height:495px;
      margin:0; 
      padding:0;
      border: solid 2px red;
      /*position:relative;*/
      top:50%;
</style>
</head>

<body>
<div id="startpage"></div>
</body>
</html>

Either i add: "position:relative" or not, the div remains at the same place. If i use "px" rathet then "%" it moves down but i need "%" because otherwise, in various display resolutions that div will be placed in various locations.
Any idea how to make a div "move" using CSS?
Thanks !

**Stomme poes** · Mar 18, 2012 03:54

This is how positioning with coordinates works:

When you put "position: relative" on someone, what you've done is created a NEW box on top of the OLD box. The old box is invisible, because all the visible things in your box are transferred to the new box. When you add coordinates like top and left to it, you move the NEW box, and the OLD one remains behind, taking up space.
If you give % coordinates, this is in relation to that old box, not the page.

When you put "position: absolute" on someone, you yank that box entirely out of the flow and place it in relation to the nearest positioned ancestor. This is any box who is a parent, grandparent, etc with "position: something" on it. If no ancestor box is positioned, then the document is used (the specs say the viewport, but this makes no sense since you can scroll these abso-po'd boxes off screen).

To move your box 50% down to the middle, you have to realise the browser has a problem here: the middle of the screen or the middle of the document?? It does neither well.

Paul O'B has a convoluted solution for vertically centering big boxes (and it's convoluted because of how browsers and CSS (don't) work well vertically). Here's one: http://pmob.co.uk/pob/hoz-vert-center.htm

He's got others somewhere too. Notice it takes extra elements to work.

**deotpit** · Mar 18, 2012 04:15

And it did move it horizontally. I didn't use "position: relative" only put it between asterixes. And last: there is no parent to that div!
I'll try that article maybe i get salvation there...
Thans

User Tag List

Thread: "Top" style is not working in my CSS

Thread Tools

Display

"Top" style is not working in my CSS

Thanks. But it did move it down with "px" measurement rather then %

Bookmarks

Bookmarks

Posting Permissions