#top
{
position:relative;
top:16px;
left:0px;
display:block;
width:100%;
height:10px;
padding:0px 0px 0px 0px;
margin:0px 0px 0px 0px;
background-color:#f61426;
}
#bottom
{
position:relative;
top:0px;
left:0px;
display:block;
width:100%;
height:10px;
padding:0px 0px 0px 0px;
margin:0px 0px 0px 0px;
background-color:#eda5a1;
}
With reference to the above, why doesn't this:
<div id="top">top</div>
<div id="bottom">bottom</div>
....display one block under the other? The bottom block also appears to want to be exactly 16px from the top. Does relative not mean relative?
Help my feeble brain! I just don't find this stuff intuitive!
Assistance?
Simon'Relative' means relative to its own natural position. When you do what you're doing with the first element there, the element seems to have moved (in relation to where it would naturally be - the top of the page) but the space it occupies naturally is still occupied. It's like it only looks like it moved. Does that makes sense?
What do you want to happen?Yeah.... actually that makes complete sense... great explanation... thanks... think I was actually coming to that conclusion (but tto slowly!).... want one block to sit on top of the other... in which case the bottom block will need top:16px - thanks... this explains a lot.When you say 'one block on top of the other' do you mean overlapping? If you want the bottom block to actually overlap the top one, you can use negative margin-top.Hi -
I'm not sure what you mean, either - these don't have any space between them:
<html>
<head>
<title>divs</title>
<style type="text/css">
#top{
width:100%;
height:60px;
padding:0px;
margin:0 auto;
background:#f61426 none;}
#bottom{
width:100%;
height:100px;
padding:0;
margin:0 auto;
background:#eda5a1 none;}
</style>
</head>
<body>
<div id="top">It seems like we just need a bit of content and height to see...</div>
<div id="bottom">that it is the margins / padding that determine vertical separation on
block-level elements</div>
</body>
</html>I've solved it now.... my problem was that the bottom block was appearing over the top block. I hadn't appreciated that even when I was inputting, say, a relative position of top:16px (for the top block) it's physical space and perceived space of the item will be different. I had assumed that if the next <div> with a relative top of 0px would slot neatly under the top block with 16px... instead of overlapping. If you're still interested, send me an email and I'll send you a username and password for the page concerned. Really appreciate your help. <!-- e --><a href="mailto:[email protected]">[email protected]</a><!-- e -->
{
position:relative;
top:16px;
left:0px;
display:block;
width:100%;
height:10px;
padding:0px 0px 0px 0px;
margin:0px 0px 0px 0px;
background-color:#f61426;
}
#bottom
{
position:relative;
top:0px;
left:0px;
display:block;
width:100%;
height:10px;
padding:0px 0px 0px 0px;
margin:0px 0px 0px 0px;
background-color:#eda5a1;
}
With reference to the above, why doesn't this:
<div id="top">top</div>
<div id="bottom">bottom</div>
....display one block under the other? The bottom block also appears to want to be exactly 16px from the top. Does relative not mean relative?
Help my feeble brain! I just don't find this stuff intuitive!
Assistance?
Simon'Relative' means relative to its own natural position. When you do what you're doing with the first element there, the element seems to have moved (in relation to where it would naturally be - the top of the page) but the space it occupies naturally is still occupied. It's like it only looks like it moved. Does that makes sense?
What do you want to happen?Yeah.... actually that makes complete sense... great explanation... thanks... think I was actually coming to that conclusion (but tto slowly!).... want one block to sit on top of the other... in which case the bottom block will need top:16px - thanks... this explains a lot.When you say 'one block on top of the other' do you mean overlapping? If you want the bottom block to actually overlap the top one, you can use negative margin-top.Hi -
I'm not sure what you mean, either - these don't have any space between them:
<html>
<head>
<title>divs</title>
<style type="text/css">
#top{
width:100%;
height:60px;
padding:0px;
margin:0 auto;
background:#f61426 none;}
#bottom{
width:100%;
height:100px;
padding:0;
margin:0 auto;
background:#eda5a1 none;}
</style>
</head>
<body>
<div id="top">It seems like we just need a bit of content and height to see...</div>
<div id="bottom">that it is the margins / padding that determine vertical separation on
block-level elements</div>
</body>
</html>I've solved it now.... my problem was that the bottom block was appearing over the top block. I hadn't appreciated that even when I was inputting, say, a relative position of top:16px (for the top block) it's physical space and perceived space of the item will be different. I had assumed that if the next <div> with a relative top of 0px would slot neatly under the top block with 16px... instead of overlapping. If you're still interested, send me an email and I'll send you a username and password for the page concerned. Really appreciate your help. <!-- e --><a href="mailto:[email protected]">[email protected]</a><!-- e -->