Hi,
In the following css snippet each attempt at giving div#header a margin-top of 7.5em from the container; results in the container div moving an additional 7.5em from the top of the viewport, what am I missing? Is this the margin collapsing gremlin at work?
<style type="text/css" media="screen,projection">
/* ckimedia winter layout - ckimedia.com */
/* You may adapt elements of this CSS in your own projects, but the unique combination of images, colors, sizes, typography, and positioning ("the design") is copyright 2004 ckimedia.com and may not be reproduced. */
/* core values */
area,
base,
basefont,
head,
meta,
script,
style,
title,
noembed,
noscript,
param
{
display: none;
}
* {
margin: 0;
padding: 0;
}
body{ background: #696969 url(i/grad_back.jpg) fixed repeat-x; font: 90%/1.4em "new century schoolbook", serif; }
div#container {
margin: 10px auto;
width: 600px; /* width of the overall page */
height: 700px;
text-align: left;
background: #5A6995 url(i/bbg.gif) top right no-repeat;
}
div#header{
position: relative;
background-color: transparent;
border: 1px solid black;
}
div#header p{
background-color: transparent;
}
div#column1 { float : left; width : 45%; background-color: transparent; border: 1px solid black; } div#column2 { float : right; width : 45%; background-color: transparent; border: 1px solid black; }
div#footer{ background-color: transparent; border: 1px solid black; clear: both;
}
</style>
</head>
<body>
<div id="container">
<div id="header"><p>This is the header.</p></div>
<div id="column1">This is column 1</div>
<div id="column2">This is column 2</div>
<div id="footer">This is the Footer.</div>
</div></body> </html>
****************************************************** The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list & getting help ******************************************************
