/    Sign up×
Community /Pin to ProfileBookmark

DIV Content Centering With A Centered Wrapper Help, PLEASE

Copy linkTweet thisAlerts:
Dec 15.2009

I am working on a site that “wraps” all the content with CSS to be centered using the following code (this works fine):
#content {
width: 750px ;
margin-left: auto ;
margin-right: auto ;
I need to have a fixed size content box that is always in the same position over a background image that is controlled via CSS and a div tag. I tried the following code, but it always drops down the entire site.
#apDiv1 {
position:relative;
top:331px;
width:298px;
height:126px;
z-index: 3;
For some reason I can not get the div tag controlled content box to be inside the initial #content container. It is always outside. I need it to inherit the initial centering wrapper and then be vertically adjusted to fit in the appropriate location. Any ideas would be greatly appreciated. PLEASE

to post a comment
CSS

2 Comments(s) ↴

Copy linkTweet thisAlerts:
@FangDec 15.2009 — <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<style type="text/css">
* {margin:0;padding:0;}
#content, #apDiv1 {border:1px solid;}

#content {
width: 750px ;
margin: auto ;
}
#apDiv1 {
margin-top:331px;
width:298px;
height:126px;
}
</style>

</head>
<body>
<div id="content">
<div id="apDiv1">Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum.</div>
</div>
</body>
</html>
Copy linkTweet thisAlerts:
@azdesignauthorDec 16.2009 — Thanks for the reply. I still have the odd issue of the entire site dropping down inside the CSS container. I have posted an image on our server at the following link:

http://ridesoul.com/issue.gif

The relevant site code is posted below. Any help would be greatly appreciated.

<!--GLOBAL FONT CONTROL CSS SHEET -->

<link rel="stylesheet" type="text/css" href="http://www.ridesoul.com/globaltext.css">

<!--END LINKING SECTION -->

<!--BEGIN RELEVANT JAVASCRIPT INCLUDES -->

<!--MAIN MENU LINK -->

<script type="text/javascript" language="JavaScript1.2" src="http://www.ridesoul.com/code/stmenu.js"></script>

<!--END RELEVANT JAVASCRIPT INCLUDES -->

<style type="text/css">

body {

margin-left: 0px;

margin-top: 0px;

margin-right: 0px;

margin-bottom: 0px;

background-image: url(bg.jpg);

}

#content {

width: 750px;

margin: auto;

border: 1px solid;

}

#apDiv1 {

position:relative;

top:450px;

width:298px;

height:126px;

z-index: 3;

left: 50px;

}

</style>


</head>

<body>

<!--NEWSLETTER SUBMISSION DIV CONTAINER FOR LOCATION -->

<div id="content">

<div id="apDiv1">Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum.</div>

<table width="750" border="0" cellpadding="0" cellspacing="0">

<!--BEGIN TOP STATIC MENU -->

<tr bgcolor="#FFFFFF">

<td height="20" align="right" valign="bottom" background="IMAGES FINAL-READY FOR UPLOAD/top1.jpg" class="blackheader"><a href="http://www.ridesoul.com">Home</a> &nbsp;&nbsp;<a href="http://blog.ridesoul.com" target="_blank">Blog</a> &nbsp;&nbsp;<a href="http://www.ridesoul.com/newsletter.html">Newsletter</a> &nbsp;&nbsp;<a href="http://www.ridesoul.com/contact.html">Contact</a> &nbsp;&nbsp;<a href="http://www.ridesoul.com/quikstore/cart.php?view=1">Shopping Cart</a>&nbsp;&nbsp;</td>

</tr>

<!--END TOP STATIC MENU -->

<!--BEGIN TOP IMAGE BANNER -->

<tr bgcolor="#FFFFFF">

<td height="220"><img src="IMAGES FINAL-READY FOR UPLOAD/top2.jpg" width="750" height="220"></td>

</tr>

<!--END TOP IMAGE BANNER -->

<!--BEGIN LOWER DHTML NAVIGATION MENU -->


<tr>

<td width="750" height="20" align="left" valign="bottom" background="IMAGES FINAL-READY FOR UPLOAD/top3.jpg">

<script type="text/javascript" language="JavaScript1.2" src="http://www.ridesoul.com/code/stm31.js"></script> </td>

</tr>

<!--END LOWER DHTML NAVIGATION MENU -->

<!--BEGIN 2 HORIZONTAL PROMO SECTION -->

<tr bgcolor="#FFFFFF">

<td width="750" height="700" align="center" valign="top" background="IMAGES FINAL-READY FOR UPLOAD/main700bg.jpg" bgcolor="#FFFFFF">

<table width="748" border="0" cellpadding="0" cellspacing="0" bgcolor="#FFFFFF">

<!--BACKGROUND CONTAINER AND MAIN SITE SECTION -->

<tr>

<td height="700" background="IMAGES FINAL-READY FOR UPLOAD/newsletterbg.jpg" bgcolor="#CC3366">&nbsp;</td>

</tr>

</table>

</td>

</tr>

<!--END 2 HORIZONTAL PROMO SECTION -->

</table>

<!--BEGIN FOOTER SECTION -->

<table width="750" height="20" border="0" cellpadding="0" cellspacing="0" bgcolor="#FFFFFF">

<tr>

<td width="375" background="IMAGES FINAL-READY FOR UPLOAD/bottomleft.jpg" class="blackfooternew">ALL IMAGES AND DATA &copy; SOUL MITICO LLC</td>

<td width="375" background="IMAGES FINAL-READY FOR UPLOAD/bottomright.jpg" class="blackfooternew"><a href="http://www.ridesoul.com/privacy.html">PRIVACY POLICY</a></td>

</tr>

</table>

<!--END FOOTER SECTION -->

</body>

</html>
×

Success!

Help @azdesign spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.25,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...