Div over a Div with a background property.

**cbier** · 11-16-2008, 09:28 PM

I am having an issue with my code I've tried many different things over a 3 hour period. Without much success. Any help is appreciated. I am attaching the link and the code. I am trying to get that over flowing div (Side bar) to push down the copyright bg image and sit on top, but not too far, i want the bottom blue bar to be a page cap. I figured i could achieve that with padding once the time has come.

URL: http://lincolnbuyinggroup.com/new/

CSS:

Code:

#html,body {
   	margin-top:0;
   	padding:0;
}

#allContent {
	width: 1000px;
	background:#FFFFFF;
	font-family:arial;
	font-size:12px;
        margin-left:auto;
        margin-right:auto;
	}

#head { 
	float:center;
	width:1000px;
	height: 280px;
}

#bodywrapper {
	background-image:url(images/lbgbody.jpg);
	height:300px;
	width:1000px;
	float:center;
	margin-top:0px;
	background-repeat:no-repeat;
}

#sidebar {
	background-image:url(images/bgtrans.png);
	float:left;
	width:265px;
	height:1550px;
	position:relative;
	border: 1px solid;
	z-index:1;
	padding-top:5px;
	padding-left:0px;
}

#sidebartitle {
	width:250px;
	height:25px;
	color:#FFFFFF;
	position:relative;
	z-index:2;
	font-weight:bold;
	font-family:arial;
	}

#sidebarwrap{
	margin-top: 60px;
	float:left;
	margin-left: 10px;
}

#contentwrap {

	float:right;
	width:698px;
	margin-right:10px;

	
}
#contenttitle {
	
	width:700px;
	height:25px;
	position:relative;
	z-index:2;
	color:#FFFFFF;
	font-weight:bold;
	font-family:arial;
	float:right;


}
#contentmain{
	background-image:url(images/bgtrans.png);
	height:600px;
	width:690px;
	float:right;
	z-index:1;
	position:relative;
	border: 0px solid;
	padding-top:5px;
	padding-left:10px;
	

}
#footer{
	xbackground-image:url(images/lbgfoot.png);
	position:relative;
	xbackground-repeat:no-repeat;	
	display: block;
}

#endthepage {

	background-image:url(images/lbgfoot.png); 
	background-position:bottom; 
	min-height:600px; 
	padding-bottom:0px; 
	background-repeat:no-repeat;
}

#subfooter {
	height:31px; 
	padding-top:2px; 
	background: #104680;
	padding-bottom:2px; 
}
	
#linknav {
	color:#FFFFFF; 
	float:left;
	border:0px solid; 
	width:825px; 
	padding-top:8px; 
	padding-left:50px;
}
#validation {
	 float:right; 
	 background:#104680; 
	 width:100px;"
}



#sidebox1 {
	width:240px;
	background:#FFFFFF:
	float:center;
	padding-left:8px;
	padding-right:0px;
}

"endthepage" is the div containing the footer BG.
"sidebar" is the sidebar that is spilling out.
"frustrated" is how i feel to say the least (haha).. sorry.

HTML

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head><title>Lincoln Buying Group :: Official Website</title>
<link rel="stylesheet" type="text/css" href="anylink.css">
<link rel="stylesheet" type="text/css" href="lbgbodystyle.css">
<script type="text/javascript" src="anylink.js"></script>
</head>
<body bgcolor="#104680">
<!-- START CONTENT -->
<div id="allContent">

<!-- START HEADER -->
<div id="head">

<table id="Table_01" width="1000" border="0" cellpadding="0" cellspacing="0">
	<tr>
		<td><img src="images/header_01.png" width="297" height="39" alt=""></td>
		<td><a href="#" onMouseover="dropdownmenu(this, event, 'testmenu')"><img src="images/header_02.png" width="102" height="39" alt="" 

border="0"></a></td>
		<td><a href="#" onMouseover="dropdownmenu(this, event, 'testmenu')"><img src="images/header_03.png" width="176" height="39" alt="" 

border="0"></a></td>
		<td><a href="#" onMouseover="dropdownmenu(this, event, 'testmenu')"><img src="images/header_04.png" width="168" height="39" alt="" 

border="0"></a></td>
		<td><a href="#" onMouseover="dropdownmenu(this, event, 'testmenu')"><img src="images/header_05.png" width="127" height="39" alt="" 

border="0"></a></td>
		<td><img src="images/header_06.png" width="130" height="39" alt=""></td>
	</tr>
	<tr>
		<td colspan="6"><img src="images/header_07.png" width="1000" height="241" alt=""></td>
	</tr>
</table>

<!-- START BUTTON MENUS -->
	<div id="testmenu" class="anylinkcss" align="left">
		<a href="viewcalendar.php">&bull; &nbsp;View Calendar</a>
		<a href="viewlist.php">&bull; &nbsp;View List</a>
		<a href="requestatourstop.php">&bull; &nbsp;Request a Tour Stop</a>
	</div>
<!-- END BUTTON MENUS -->

</div>
<!-- END HEADER -->

<!-- START BODY -->
<div id="bodywrapper">

	<!-- START SIDEBAR -->
	<div id="sidebarwrap">
		<div id="sidebartitle">
			<img src="images/sidebartitle1.png" alt="">
		</div>

		<div id="sidebar"> 
			<?php include("sidebar.html"); ?>

		</div>
	</div>
	<!-- END SIDEBAR-->

	<!-- START CONTENT BOX -->
	<div id="contentwrap">
		<div id="contenttitle">
			<img src="images/title1.png" alt="">
		</div>

		<div id="contentmain">
			Test Test
		</div>
	</div>
	<!-- END CONTENT BOX -->
</div>
<!-- END BODY -->

<!-- START FOOTER -->
<div id="endthepage"></div>
<!-- END FOOTER -->


<!-- START SUBFOOTER -->
<div id="subfooter">

	<div id="linknav">
		Home :: What We Do :: Our Pledge :: Gallery :: Contact 
	</div>

	<div id="validation">
    		<a href="http://validator.w3.org/check?uri=referer"><img src="http://www.w3.org/Icons/valid-html401-blue" alt="Valid HTML 4.01 			

	transitional" height="31" width="88" border="0"></a>
 	</div>

</div>
<!- END SUBFOOOTER -->

</div>
<!-- END CONTENT-->
</body>
</html>

Thanks again

- Chris

**cbier** · 11-16-2008, 10:06 PM

nvm..

**Snookerman** · 11-17-2008, 09:08 PM

Have you fixed the problem or did you just get tired of waiting? If you fixed it, you should edit your first post and ad the Resolved prefix to tell others that a solution has been found (maybe even post it).

**cbier** · 11-23-2008, 09:36 PM

To resolve this I have added

Code:

margin-bottom: -300px;

to my content and sidebar, it pulled the bottom image closer to them.

Thread: Div over a Div with a background property.

Thread Tools

Search Thread

Div over a Div with a background property.

Bookmarks

Bookmarks

Posting Permissions