Placement of content in source code

teammatt3's picture

He has: 2,102 posts

Joined: Sep 2003

Is there a way to get the first div in the code to appear below the second div in the code when the page is rendered, without using absolute positioning?

<div id="i-want-this-below-the-other-div">This div is on the top in the source code, but I want it displayed below the following div</div>

<div id="i-want-this-on-top-of-the-other-div">This div is on the bottom of the source code, but I want it displayed above the other div</div>

He has: 629 posts

Joined: May 2007

Well, I suppose you could give the first DIV a large negative bottom margin to pull the second DIV up an appropriate amount, and make room with a positive top margin. But why would you want to do this?

If you could give us a use case, or post an example, we may be able to be more helpful.

Cordially, David

Cordially, David
--
delete from internet where user_agent="MSIE" and version < 8;

teammatt3's picture

He has: 2,102 posts

Joined: Sep 2003

Yes! Thanks webwiz, the margin will do it. Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
body {
width:778px;
}

#top {
background-color:#000000;
margin-top:500px;
}
#bottom {
width:777px;
background-color:#898989;
margin-top:-250px;
}
</style>
</head>

<body>
<div id="top">
<p>please be on the bottom: this div is on the top in the source code</p>
</div>

<div id="bottom">
<p>this div is on the bottom in the source code</p>
</div>
</body>
</html>

The reason I want to try this is to experiment with placing the main body content first in the code, the navigation code, and then the header, and footer to see if that has any noticeable affect on search engine rankings. Sometimes Google will display the header part of the content (stuff like the site title and slogan) for the description in the SERPs. If the main page content was first in the source code, then at least Google would grab some interesting stuff. I just want to play around with that idea.

Megan's picture

She has: 11,421 posts

Joined: Jun 1999

I've heard differing opinons from SE experts about whether source code matters. Some say yes, some no (that text towards the top is given more importance and links crawled better etc.). I think it often makes more sense when the page is viewed without a stylesheet, which happens in old browsers, mobiles, and for alternate devices sometimes.

This is an interesting idea for doing it without absolute positioning (I'm a little fuzzy on why people have such a problem with absolute positioning, not that I think it's super-great or anything, just unaware of rationale against it, haven't had a chance to read the info about that... )

He has: 629 posts

Joined: May 2007

Megan said:

Quote: I'm a little fuzzy on why people have such a problem with absolute positioning

It's not people that have problems with absolute positioning, it's browsers. Smiling

example: http://www.positioniseverything.net/posbugs.html

FWIW - absolute positioning takes an element and "lifts" it off the page, as it were. The rest of the content knows nothing about it. If the element is large, changes to content, text size, window size etc. can easily "break" the page as the absolutely positioned element may then cover other parts of the page.

OTOH - it's great for things like positioning corner images in - well - the corner.

Cordially, David

Cordially, David
--
delete from internet where user_agent="MSIE" and version < 8;

demonhale's picture

He has: 3,278 posts

Joined: May 2005

Yep, absolute positioning is very popular on themeing sites so they can put their banners in the top left or top right of your browser window... I usually stick with negative margins for positioning elements the way I want it to, I tried the same experiment you're planning teammatt, my results we're inconclusive, but using appropriate header tags seems to do the trick, and putting excerpts of contents on top... Please post your results of this experiment...

Megan's picture

She has: 11,421 posts

Joined: Jun 1999

I've never had a problem with absolute positioning - always works well for me but I'll check out that link. To me positioning makes a lot more sense than negative margins...

teammatt3's picture

He has: 2,102 posts

Joined: Sep 2003

Yeah using absolute positioning is making more sense to me to. Setting up those margins is proving to be a pain in the butt. I was hoping there was a way to do it with floats but it doesn't look like there is. CSS should have a "sink" to go along with "float".

demonhale's picture

He has: 3,278 posts

Joined: May 2005

Never had problems with absolute positioning either, just prefer the negative margins if all else fails...

Want to join the discussion? Create an account or log in if you already have one. Joining is fast, free and painless! We’ll even whisk you back here when you’ve finished.