Forum Moderators: not2easy
I have a site that has a backcontent div containing Flash animation and a maincontent div that contains, well, the main content. I want to center the overlapping divs on the page. This works just fine in Firefox, but I cannot get the divs to line up right in IE7. In IE7 the backcontent div centers, but the maincontent div lines up to the right edge of the backcontent div. Any help is appreciated!
Code below:
HTML
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<div id="backcontent" class="backcontent">
<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0" width="1024" height="768" id="backcontent" align="middle">
<param name="allowScriptAccess" value="sameDomain" />
<param name="movie" value="Flash/backcontent.swf" />
<param name="quality" value="high" />
<param name="wmode" value="transparent" />
<param name="bgcolor" value="#999999" />
<embed src="Flash/backcontent.swf" quality="high" wmode="transparent" bgcolor="#999999" width="1024" height="768" name="backcontent" align="middle" allowscriptaccess="sameDomain" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />
</object>
<script type="text/javascript" src="fixit.js"></script>
<div id="maincontent" class="maincontent">
<table class="maincontenttable" cellpadding="0" style="border-collapse: collapse" width="1024">
<tr>
<td height="20" background="images/topnavBKG.gif">
<table border="0" width="100%" id="table2" cellpadding="0" style="border-collapse: collapse">
<tr>
<td width="1024">
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td height="504" width="1024" bgcolor="#FFFFFF">
<p align="center">main content</p>
</td>
</tr>
</table>
</div>
</div>
CSS
[code]
.backcontent {
z-index: 1;
background-color: gray;
width: 1024px;
height: 768px;
text-align: center;
margin: 0 auto;
}
.maincontent {
position: absolute;
z-index: 2;
width: 1024px;
height: 524px;
top: 119px;
text-align: center;
margin: 0 auto;
}
[/codes]
If I am reading your post correctly, you basically have a two column layout left being the flash; right being the content. You would probably be better off using floats. In the example below, define the widths and heights (where I put?px) as they are appropriate for your site.
/* CSS */
body {
margin: 0;
padding: 0;
height: 100%;
}
#wraper {
width:?px; /* Necessary to center page should total combined widths of below div's */
height: 100%;
margin: 0 auto; /* Centers entire page If you do not want the page to flush to the top of the window, make the margin:?px auto 0 auto; */
text-align: left; /* For IE */
}
#flash { /* assign margins and padding as needed */
width:?px;
height:?px;
float: left;
}
#content { /* assign margins and padding as needed */
width:?px;
height:?px;
float: left;
}
<!-- HTML -->
<div id="wraper">
<div id="flash">FLASH OBJECT</div>
<div id="content">CONTENT</div>
<br style="clear:both">
</div> <!-- End wraper div -->
If you use % instead of pixels for withds, you will get a fluid design.
Marshall
Thanks for the welcome and the reply. Actually, what I'm after is layering one div on top of the other. Imagine this webmasterworld.com page as as example, with the header (webmasterworld.com graphic, welcome, nav, etc.) and footer (All trademarks and copyrights, etc.) as the Flash backcontent div and the rest of the page as the maincontent div. The whole page should be 1024px wide, but centered in higher resolutions.
I took your suggestions and incorporated them into my pages with a few tweaks and it worked. I had tried using a wrapper before, but I think I had the stacking context screwed up.
Here's what worked:
<style type="text/css">
.wrapper {
width:1024px;
height: 100%;
margin: 0 auto;
text-align: left; /* For IE */
}
.backcontent {
z-index: 1;
background-color: gray;
width: 1024px;
height: 768px;
text-align: center;
margin: 0 auto;
}
.maincontent {
position: absolute;
z-index: 2;
background-color: blue;
width: 1024px;
height: 524px;
top: 119px;
text-align: left;
margin: 0 auto;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="backcontent ">FLASH OBJECT</div>
<div class="maincontent ">MAIN CONTENT</div>
</div>
</body>
It always seems so simple in the end...
Thanks!
Marshall
