Simple position not as expected

**BernardS** · 04-09-2009, 04:49 AM

Could someone please explain to me why, in the sample which follows, the top border of the <P> box is not adjacent to the top border of the <DIV> box, as is the case for the left border?

<HTML>
<HEAD>
<STYLE type="text/css">
div {
position: absolute;
top: 0px;
left: 0px;
width: 200px;
height: 200px;
border: thin solid #000000;
}
p {
position: absolute;
top: 0px;
left: 0px;
width: 100px;
height: 100px;
border: thin dashed #ff0000;
}

</STYLE>
</HEAD>

<BODY>
<DIV>
<P></P>
</DIV>

</BODY>
</HTML>

**racer x** · 04-09-2009, 09:26 AM

if you add
* {
margin:0;
padding:0;
}
it will reset those to start on even ground.

Here is an article about a popular CSS reset technique:
http://meyerweb.com/eric/thoughts/20...eset-reloaded/

**LadynRed** · 04-09-2009, 09:41 AM

CSS reset is good, but using the * for everything can cause problems, I would suggest a modification of Eric's reset to clear margins and paddin

Why are you absolutely positioning a PARAGRAPH ??? Why would you take text completely out of the document flow ?? When you do that, it is completely 'divorced' from everything else in the document.

For that matter, the absolute on the div likely isn't necessary either. Better to use the normal document flow and then use floats to put things where you want them. Use positioning only when absolutely necessary.

**racer x** · 04-09-2009, 10:13 AM

Oops, thanks for mentioning LadynRed, I probably should have noted that * for everything was not was I was suggesting being used for the actual site. I was just trying to show how resetting would help in this example.

**BernardS** · 04-09-2009, 11:42 AM

Ok, if I scrub the position and let them remain in normal flow, the resultant appearance is the same.
If I add to the para 'margin: 0px;' then it does indeed shift to the top edge of the DIV. So it appears that the para has a top margin by default. Is this correct? It seems very strange.

**LadynRed** · 02:35 PM

It's not strange. I believe that ALL elements have default margins and padding applied, which is why it's good practice to zero it out from the very start. This is what I use as a typical reset:

Quote:

body, p, hr, img, address, h1, h2, h3, h4, a, ul, ol, li, form, #container, #wrapper, #header, #addressBlock, #nav, #sidebar, #content{
margin: 0;
padding: 0;
}

Those are the most common html elements I use, as well as the most common IDs that I use. I may add things to that reset as I build my structure. As I build in my CSS, I add back in the margins and padding that *I* want for the design.

**BernardS** · 04-09-2009, 02:31 PM

That's the complete answer, thank you.
It is easy to fall foul of these little complications for a long time before realising that they exist.