[SOLVED] css positioning

Lambneck · February 24, 2009

I was just wondering if it were possible to do something like the following.

Lets say an html document has two div's

ex.

<div id="1">content</div>

<div id="2">more content</div>

Is there a way to have the html remain in this order but have css arrange the content of each div? so that <div id="2">'s content shows up above <div id="1">'s content?

jcombs_31 · February 24, 2009

You could, but why would you want to? I don't see the logic.

Lambneck · February 24, 2009

well I want the contents positioning to be changeable

while still retaining the original structure of the html code.

haku · February 24, 2009

Yes and no.

It can be done with absolute positioning, but that just opens up a whole new can of worms, and depending on what you are trying to do, may not work.

rhodesa · February 24, 2009

as long as the elements have a fixed height/width, it's pretty easy to do with absolute positioning.

it's also not the best method, but you could also you JavaScript to switch the items when the page is done loading

Lambneck · February 24, 2009

cool, ill look into it. thanks for the advice.

SuperBlue · February 24, 2009

You should not use JavaScript for this, it would just slow down the rendering of your page in the browser.

Some sites who use JavaScript for layout, are even freezing several seconds in certain browsers, so i would advise strongly against it.

The main reason for having the content first in the structure, is SEO related. Its generally accepted that important content should be as close to the top as possible, this is easily achieved with CSS. For instance, navigation, headers, and footers, should be placed after the main content.

We would then place headings above Content, and Navigation links, for accessibility reasons. Since people using screen-readers tend to jump between headings, it basically reads the heading-text, and the "list of x links", so this is very user-friendly for screen-readers.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">

  <head>
    <title>Important Content First Example</title>
    <style type="text/css">
     * { /* Removes Margin and Padding on Everything */
       margin:0;
       padding: 0;
     }
     #Basement {
       position: relative; /* Enables Absolute Positioning inside Basement */
       min-width: 728px;
       max-width: 1600px; /* Optional */
       width: 95%;
       margin: 1em auto; /* Centers the Basement */
     }
     #Header {
      position: absolute;
      top: 0;
      width: 100%;
      height: 150px; /* Can be percentages, ems or whatever */
      background: #808080;
     }
     #Navigation-1 {
      width: 15%;
      left: -69%;
     }
     #Navigation-2 {
      width: 15%;
     }
     #Content {
      width: 69%;
      right: -15%;
     }
     .S1 { /* Shared between all Columns */
      position: relative;
      float: left;
      top: 150px; /* Same as Header Height */
     }
     h1 {
       margin: 0 0 0.5em 0;
       padding: 0 0.5em 0 0.5em;
     }
     #Content p {
       margin: 0 0 0.7em 0;
       padding: 0 1em 0 1em;
     }
     ol {
       list-style-type: none;
     }
     #Navigation-1 h2, #Navigation-2 h2 {
       margin: 0.2em 0;
       background: #B9C6B1;
     }
    </style>
  </head>

  <body>
    <div id="Basement">
      <div id="Content" class="S1">
       <h1>Important Content First Example</h1>
       <p>This example shows one method to place the Important Content closest to the top in your source.</p>
      </div>
      <div id="Navigation-1" class="S1">
       <h2>Navigation</h2>
       <ol>
        <li>Link 1</li>
        <li>Link 2</li>
        <li>Link 3</li>
       </ol>
      </div>
      <div id="Navigation-2" class="S1">
       <h2>Latest post</h2>
       <ol>
        <li>Link 1</li>
        <li>Link 2</li>
        <li>Link 3</li>
       </ol>
      </div>
      <div id="Header"></div>
    </div>
  </body>

</html>

I used relative positioning on the columns, to keep the flow, but an additional wrapper would work as well, as such we got many options to chose from.

Having the content first, or closest to the top, is however only likely to have SEO value, and not accessibility value. Since people with screen-readers tend to jump between headings, and count the links on the page. Etc. So doing it for accessibility reasons would just be pointless.

SuperBlue · February 24, 2009

Note that IE likely needs left: 0; applied to the Header, along with the top:0; declaration.

TheFilmGod · February 24, 2009

I'm assuming you would like the content to render normally at first, and then have the user click a link and drag the contents of the div around the page? If that is the case you should use javascript.

baccarak · February 25, 2009

You should not use JavaScript for this, it would just slow down the rendering of your page in the browser.

Some sites who use JavaScript for layout, are even freezing several seconds in certain browsers, so i would advise strongly against it.

The main reason for having the content first in the structure, is SEO related. Its generally accepted that important content should be as close to the top as possible, this is easily achieved with CSS. For instance, navigation, headers, and footers, should be placed after the main content.

Having the content first, or closest to the top, is however only likely to have SEO value, and not accessibility value. Since people with screen-readers tend to jump between headings, and count the links on the page. Etc. So doing it for accessibility reasons would just be pointless.

I agree will all of BlueBoden has has stated here and use this method very successfully in SEO. Its highly regarded method used by top SEO experts since they assume that the searchbots read only a certain number of lines from the top of the page. I usually take this as the first 500 as a rule of thumb.

It is also worth noting is ommitting unnessassary metatags too and other stuff like this:

Personally I also ommit description and keyword tags since Google do not use these

Also put all your javascripts in seperate files and link to them.

More tibits I will add to the SEO section. of the forum.....

Lambneck · February 25, 2009

Is there a way to use absolute positioning on a header tag inside a div tag so that the positioning of the header tag is in relation to the div tag and not the entire page?

SuperBlue · February 25, 2009

Is there a way to use absolute positioning on a header tag inside a div tag so that the positioning of the header tag is in relation to the div tag and not the entire page?

As i just mentioned in my above bost, but to make this clear for others who may be browsing.

Thats usually done by applying position: relative; to the containing element.

However, the specification says that it would work inside any positioned element, I.e. Inside any element with its position set to something else then static. Normally you would want to pretain the flow, so this is easily done by applying position: relative; to the containing element.

Sign In

[SOLVED] css positioning

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Important Information