troubleshooting Question

Positioning content lower in HTML but higher on visible page

Avatar of drgdrg
drgdrg asked on
JavaScriptCSSHTML
5 Comments1 Solution260 ViewsLast Modified:
I'm working on a page with content that is shown on the top of every page, but for SEO reasons, I want it lower on the page.

I've tried this script from another thread:

<html>
	<head>
		<style type="text/css">
			div {position:relative}
		</style>
	</head>
	<body> 
		<div id="markupPlacement">Really on Top</div>
		<div id="otherContent">Really on Bottom</div>
		<script type="text/javascript">
			document.getElementById('markupPlacement').style.top = document.getElementById('otherContent').offsetHeight + document.getElementById('markupPlacement').offsetHeight;
		</script>	
	</body> 
</html>

However, with bigger blocks of text, it doesn't work quite right.  It moves the top piece down, but leaves a gap on the top.

Is there a better way to do this, with JS, CSS or, egads, tables?

Thanks
Join the community to see this answer!
Join our exclusive community to see this answer & millions of others.
Unlock 1 Answer and 5 Comments.
Join the Community
Learn from the best

Network and collaborate with thousands of CTOs, CISOs, and IT Pros rooting for you and your success.

Andrew Hancock - VMware vExpert
See if this solution works for you by signing up for a 7 day free trial.
Unlock 1 Answer and 5 Comments.
Try for 7 days

”The time we save is the biggest benefit of E-E to our team. What could take multiple guys 2 hours or more each to find is accessed in around 15 minutes on Experts Exchange.

-Mike Kapnisakis, Warner Bros