Solved

CSS Layout Challenge :: pure CSS (no tables), 3 column, centered layout placing content as close to possible to the top of html body

Posted on 2004-09-28
29
717 Views
Last Modified: 2012-08-13
Hi experts.  Time to put the hammer down and ask for help...

I am trying to create a static layout 'centered' on a page.  My #1 goal is to push content to the top of the html above navigation, etc.  (e.g: <body><div>content</div><div>topnav</div>><div>header</div>...etc.)

A crude idea of what I am looking to see visually:
 __________________________
|                   topnav                |
|__________________________|
|                   header                |
|__________________________|
| left  |        content        | right |
| nav  |                          |  col  |
|        |                          |        |
|        |                          |____ |
|        |                                   |
|        |                                   |
|        |                                   |
|_____|____________________|
|                   footer                  |
|__________________________|

I've read 'glish.com', 'alistapart.com', 'csszengarden.com' and the likes of CSS layout and searched my brains out, so please, no links, solutions only.

SPECS:
total container width: 766px
topnav, header, footer width: 762px centered
left nav width: 162px; text-align: left
right col width: 190px; text-align: center
content width: 410px

Ideally, the left nav would match the height of the content, and the right nav would stop where data ends and allow content to flow underneath.

I realize this is probably impossible and I would gladly give 2000 points if I could to the true CSS expert who can solve this or at least come close!

Thanks in advance!
0
Comment
Question by:ddarby14
  • 11
  • 7
  • 5
  • +2
29 Comments
 
LVL 13

Expert Comment

by:cLFlaVA
Comment Utility
Hi...

I am by NO means a CSS expert.  In fact, if you don't like my solution, I take no offense.  I'm trying to learn just like you.  I've also recently come to face the fact that I need to learn table-less layouts, and have spent the last two weeks attempting just such a task with my site.

Oh well, here goes.  Let me know if it works for you...


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>

<style type="text/css">
body {
      text-align: center;
      }

#wrapper      {
      border: 1px solid black;
      margin: 0 auto;
      padding: 0;
      width: 766px;
      text-align: left;
      background-color: gray;
      display: block;
      }

#content {
      background-color: white;
      width: 604px;
      float: right;
      display: block;
      }

#topnav, #header, #footer {
      width: 762px;
      margin: 0 auto;
      text-align: center;
      }

#footer {
      bottom: 0;
      clear: both;
      position: relative;
      }

#rightcol {
      float: right;
      width: 190px;
      text-align: center;
      top: 0;
      border-left: 1px solid black;
      border-bottom: 1px solid black;
      }

#leftnav {
      display: block;
      }

</style>
</HEAD>

<BODY>

<div id="wrapper">
      <div id="topnav">this is the top navigation section</div>
      <div id="header">herein lies the header</div>
      
      <div id="content">
            <div id="rightcol">
                  this is the right column<br>
                  this is the right column<br>
                  this is the right column<br>
                  this is the right column<br>
                  this is the right column<br>
                  this is the right column<br>
                  this is the right column<br>
            </div>
            content goes here content goes here content goes here content goes here content goes here content goes       here content goes here content goes here content goes here content goes here content goes here content goes here content goes here content goes here content goes here content goes here content goes here content goes here content goes here content goes here content goes here content goes here content goes here content goes here content goes here content goes here content goes here content goes here content goes here content goes here content goes here content goes here content goes here content goes here content goes here content goes here content goes here content goes here <br><br>
            content goes here content goes here content goes here content goes here content goes here content goes here content goes here content goes here content goes here content goes here content goes here content goes here content goes here content goes here content goes here content goes here content goes here content goes here content goes here content goes here content goes here content goes here content goes here content goes here content goes here content goes here content goes here content goes here content goes here content goes here content goes here content goes here content goes here content goes here content goes here content goes here content goes here content goes here .<br>
      </div>
      <div id="leftnav">
            this is the left nav<br>
            this is the left nav<br>
            this is the left nav<br>
            this is the left nav<br>
            this is the left nav<br>
            this is the left nav<br>
            this is the left nav<br>
            this is the left nav<br>
      </div>
      <div id="footer">this is the footer, in all it's glory</div>
</div>

</BODY>
</HTML>
0
 
LVL 13

Expert Comment

by:cLFlaVA
Comment Utility
Of course, someone will tell you that the doc-type is incomplete in the example above, but that's a horse of a different color.

Yes, it is, but this is an example.

:)
0
 
LVL 13

Expert Comment

by:cLFlaVA
Comment Utility
Some changes to my CSS (no effect, just taking out some unnecessary stuff):

<style type="text/css">
body {
      text-align: center;
      }

#wrapper      {
      border: 1px solid black;
      margin: 0 auto;
      padding: 0;
      width: 766px;
      text-align: left;
      background-color: gray;
      }

#content {
      background-color: white;
      width: 604px;
      float: right;
      }

#topnav, #header, #footer {
      width: 762px;
      margin: 0 auto;
      text-align: center;
      }

#footer {
      clear: both;
      }

#rightcol {
      float: right;
      width: 190px;
      text-align: center;
      top: 0;
      border-left: 1px solid black;
      border-bottom: 1px solid black;
      }

#leftnav {
      display: block;
      }

</style>
0
 

Author Comment

by:ddarby14
Comment Utility
cLFlaVA:

Thanks for jumping in!  Your layout looks like what I need, however, the content is in 4th position of the 6 possible regions in the html code.  My highest priority is to get it to the first position (if impossible, then at least as close as possible..)

:)

Any thoughts?

D
0
 
LVL 13

Assisted Solution

by:cLFlaVA
cLFlaVA earned 140 total points
Comment Utility
You're really testing me   :)

Ok, I set the thing up with absolute positioning.  The content div is now the 2nd div in, which is better than 4th.  Also, I learned something new.  I'll never bust a doc-type stickler's chops again.  It really does make a difference.  Part of the reason I never understood the importance was because I never was able to see what difference it made.  However, adding the second part of the doc-type in the example below showed me things I was doing wrong.  Thanks DOC-TYPE!


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>

<style type="text/css">
body {
      text-align: center;
      }

#wrapper {
      position: absolute;
      border: 1px solid black;
      margin: 0 auto;
      left: 50%;
      top: 74px;
      margin-left: -384px;
      padding: 0;
      width: 766px;
      text-align: left;
      background-color: gray;
      }

#content {
      background-color: white;
      width: 604px;
      float: right;
      }

#topnav {
      position: absolute;
      border: 1px solid black;
      padding: 0px;
      margin: 0 auto;
      left: 50%;
      top: 47px;
      margin-left: -384px;
      width: 766px;
      height: 25px;
      text-align: center;
      background-color: #6600FF;
      }

#header {
      position: absolute;
      border: 1px solid black;
      padding: 0px;
      margin: 0 auto;
      left: 50%;
      top: 10px;
      margin-left: -384px;
      width: 766px;
      height: 35px;
      text-align: center;
      background-color: #CC0033;
      }

#footer {
      clear: both;
      }

#rightcol {
      float: right;
      width: 190px;
      text-align: center;
      top: 0;
      border-left: 1px solid black;
      border-bottom: 1px solid black;
      }

</style>
</HEAD>

<BODY>

<div id="wrapper">
      
      <div id="content">
            <div id="rightcol">
                  this is the right column<br>
                  this is the right column<br>
                  this is the right column<br>
                  this is the right column<br>
                  this is the right column<br>
                  this is the right column<br>
                  this is the right column<br>
            </div>
            content goes here content goes here content goes here content goes here content goes here content goes       here content goes here content goes here content goes here content goes here content goes here content goes here content goes here content goes here content goes here content goes here content goes here content goes here content goes here content goes here content goes here content goes here content goes here content goes here content goes here content goes here content goes here content goes here content goes here content goes here content goes here content goes here content goes here content goes here content goes here content goes here content goes here content goes here <br><br>
            content goes here content goes here content goes here content goes here content goes here content goes here content goes here content goes here content goes here content goes here content goes here content goes here content goes here content goes here content goes here content goes here content goes here content goes here content goes here content goes here content goes here content goes here content goes here content goes here content goes here content goes here content goes here content goes here content goes here content goes here content goes here content goes here content goes here content goes here content goes here content goes here content goes here content goes here .<br>
      </div>
            this is the left nav<br>
            this is the left nav<br>
            this is the left nav<br>
            this is the left nav<br>
            this is the left nav<br>
            this is the left nav<br>
            this is the left nav<br>
            this is the left nav<br>
      <div id="footer">this is the footer, in all it's glory</div>
</div>

<div id="topnav">this is the top navigation section</div>
<div id="header">herein lies the header</div>

</BODY>
</HTML>
0
 

Author Comment

by:ddarby14
Comment Utility
.emphasis { font-style:italic; }

I <span class="emphasis">have</span> to test you...2000 points right?  :)

Couple of questions...to adapt to this setup, I would need a subfooter below the footer that is outside the wrapper, like the header, topnav.

Can you explain what the 'left: 50%' is doing?

And, the -384px margins - I see kind of how that works, though not completely, but it causes a problem.  When a users browser window size is less than the 766px width (say: 640x480), the content is still centered with everything to the right scrollable/viewable, but everything to the left is lost.  Hmmm...not that my target audience is predominately using 640x480, but for users like me (1280x1024) who tile windows, this is a problem.

I won't be able to play with this again for a couple of hours, but I appreciate the progress you've made in such short time.  Thanks again for working on this.  I knew this would be tough.  :)
0
 
LVL 13

Expert Comment

by:cLFlaVA
Comment Utility
left: 50% puts the left-most part of the <div> in the middle of the screen.  Then, the -384 moves it back 1/2 the size of the div, so it's always centered.

I will consider your other questions and get back to you if/when I find a solution.

...
0
 
LVL 53

Expert Comment

by:COBOLdinosaur
Comment Utility
No offense, but why are you using CSS?  Is it because it is the "in thing" right now?

Your question should be: How do I crate a table layout without a table.  It is a rigid grid.

Not rigid like steel, but rigid like glass.

If you are looking to use CSS to create better pages, then you need to change your mindset.  CSS is about fluidity, flexibility, and empowering the user to control the presentation.  This is a 2-dimensional magazine page layout.  Web pages that look like print media pages are an artifact of the 20th century when our options were limited, and we didn't think much about letting users decide how they want to view the pages.

You have many fixed dimension.  You are looking at fixed 2-dimensional positioning on a single plane and you are presenting all the components of the page without consideration to what the user thinks is important through the passage of time on your site.

Consider navigation.  It is using up 30%+ of the page; reducing what is available for content. Why is the user on your site? To see the cool menus, or access content?  If they are looking at content why does the nav need to be there?  They do not need the nav?  Why not a single link or button to display nav; not in 30% away from content but in 80% right over top of the content? If they need nav, they are no longer looking at the content, so that does not have to be the dominate feature at that moment in time.

You are limiting yourself by just re-creating a 2-dimensional table-like layout.  Going from 20th century layouts to full featured CSS is like going from a horse drawn wagon to a Formula 1 race car.  You have completely re-educate yourself. It is a completely different way of doing layout, and the most common mistake is trying to duplicate the old look and feel of table based design.  The second biggest mistake is continuing to try to decide how YOU think the user should see the page, instead of putting the components there and letting them drive the session.

Like I said, no offense intended.  We are seeing dozens of members coming to this and other Web topics every month struggling to transition from table layouts to CSS.  CSS is very easy to learn, but difficult to master.  It does not come near to its creative potential except when the devloper using it let's go of the past and start working 4-dimensionally.

Sorry if I intruded, I guess I'm getting frustrated seeing too many cases where the straight and honest answer is: "If that is the layout you want, then continue using tables until you are ready for CSS".

Cd&
0
 
LVL 13

Expert Comment

by:cLFlaVA
Comment Utility
No need to be sorry, like I said, I'm still trying to learn, and the best way for me to learn is by doing.  So, I tried to help, since he wasn't getting answers.

You are obviously very knowledgeable in the area of css, webdesign, etc., and you are respected on this forum.  People want to learn, however, and "continuing to use tables until you are ready for CSS" will, in some instances, never allow a person to be "ready for CSS".

My two cents.
0
 
LVL 53

Expert Comment

by:COBOLdinosaur
Comment Utility
cLFlaVA,

I'm not criticizing you.  What you are doing is offering help, and learning at the same time.  Exactly the way it should be.

ddarby14,

I'm also not criticizing your attempts to move to CSS.  

Then comment: "...until you are ready for CSS".  it not a reference to skill levels, competence, or commitmet, but to approach.  It is much easier to teach a new developer to do layout with CSS than it is to get an experience developer to re-think how they look at layout.

What I'm really trying to say is pretend you have never done a layout and play with the tools instead of looking for a way of doing what you did in the past.

Cd&
0
 
LVL 3

Expert Comment

by:OutsideTheBox
Comment Utility
Regardless of the choice to use css or tables in this particular occasion, it is ,in any event, a good exercise to understand how flow works. cLFlaVA's first go went with normal & the 2nd with some absolute. How about some relative positioning?

I think that the scrolling problem is because "Wrapper"'s horizontal position has been altered with the left -384px.
If the "wrapper" is going to be a certain (not auto) height, then center "wrapper" with the margin:0 auto; (like you have), then position everything else relatively to place it where you want it on the sheet with a top:-XXXpx(for the nav & header) or top:XXXpx(for the content/columns) to position it. That way you could load content 2nd or 3rd (at least before topnav & header, I'm thinking you'll have images with them?). Since you havent altered the horizontal position of "Wrapper", it should then start scrolling as soon as the left edge of "wrapper" hits the left edge of the window.
You may need to create an extra containing div to contain only the three columns all in one but again you could use relative positioning to load "content" first (of those three) providing all widths & heights are set (I think you could still get away with an auto height on right column with a max-height:XXXpx).

I'm not positive this would work but I thought I'd throw the idea out there.
good luck
0
 

Author Comment

by:ddarby14
Comment Utility
COBOLdinosaur:

Intrude away - no offense taken.  First I appreciate your comments on 20th century designs and the uncanny irony of your username...;)

I also can appreciate your frustration with users, but you're making too many assumptions about what I am doing - which I felt I didnt have the time to explain nor did I feel it was worth boring everyone.  This is a template driven site allowing a client to change layouts 'dynamically' by modifying their template choice which simply alters their external stylesheet.  This is why we are using css - for control.  Be assured that I am not into 'in things', but rather efficiency and control of layout and design.  You're also assuming that my arcane char sketch is to scale - it is not.  Maybe I should drop CSS and learn to char sketch?? :)  

For the sake of this discussion, the content is ~60-70 of the page.  The right area is for dynamic content/feedback.  The navigation will have dimension along with dynamic content and yes, this design is a news layout.  That's the reason for this challenge with css - to see how search engines do/will be affected by content placement in addition to the standard SEO techniques of tags such as H1-6, title and keyword grouping in such tags.

And, no offense, it's not a table layout, its a positioned layout.  Tables being used for such have always been a joke as tables were never meant for positioning - just a convenient hack, wouldn't you agree?  Maybe I'm wrong - this is not my bread and butter to be sure.

I'm no guru in CSS, not even close, but I do want to learn and implement as much CSS as possible as it affords much more creative designs than a 'standard' news layout.

So - ball back to you...can it be done?  Can the content be placed first in the html body?  By all means, show us 'dummies' the way...please!  :)  cLFlaVA is a little ahead of me, but I'm sure we're both all eyes and ears.  I may even open another question to learn more about your design thoughts as I'm sure you'd have a better thought on setting up the page.

Thanks...gotta go feed the horse and polish the carriage...!
0
 

Author Comment

by:ddarby14
Comment Utility
Cd& - no worries...I'm in it to learn (though I do need to make a living at times and get things done..!)
0
 
LVL 13

Expert Comment

by:cLFlaVA
Comment Utility
Cd&-

I understood your intentions - no criticisizing.

I do definitely understand, as a self-taught HTML developer (old-school table way) that it is an extremely hard task to stop thinking about tabular layouts, wipe the slate clean, and go with css layouts.

It's like learning a different language.
0
Find Ransomware Secrets With All-Source Analysis

Ransomware has become a major concern for organizations; its prevalence has grown due to past successes achieved by threat actors. While each ransomware variant is different, we’ve seen some common tactics and trends used among the authors of the malware.

 
LVL 53

Assisted Solution

by:COBOLdinosaur
COBOLdinosaur earned 30 total points
Comment Utility
Okay let's look at the problems and the new problems' that get created by the solutions.

The problem is to get content to the top of the HTML.  That means the browser has to have instructions on how to rearrange the components from the SEO friendly format to presentation format.  That is going to require absolute positioning.  All the elements can be givien absolute positions and they will settle in to exactly where you tell them to... in a perfect world where all browsers render the same; all users have the exact correct settings, and its not a windy day.

Absolute positioning creates a situation where the browser cannot optimize the presentation.  You have to do the thinking for it because you have taken rendering control out of its hands.  

That is a perfectly valid thing to do, but it means that the CSS has to be tweaked with scripting to help the browser.  You have 5 components and one sub-component.  The sub-component is the right column.  That goes inside the content but initially it starts out as a seperate component. A placeholder div with id 'target' goes into the content with just a single space in it and a float:right style property

All the components get style for look and presentation and no margins.  They all get this:

position:absolute;
top:xxx;
left:yyy;
where xxx and yyy are the ideal positions for the components.

the right column gets one additional attribute display:none

Each of the components now gets put exactly where it needs to be; except the sub-component. That gets helped with the onload event:

<body onload="document.getElementById('target').innerHTML=document.getElementById('rightcol')">

There now everthing is in place... except the screen size migh make it wonky, or resolution, might make a difference, or a user setting.

Well, that is yet another problem; and the solution is scripting to dynamically move the components around any way you want.  Every CSS property can be changed with scriping, and the browser re-renders instantly: document.getElementById('content').style.top='400px" etc

If you need to dynamically modify the element relationships you can use the DOM properties for the node to determine current state:

document.getElementById('content').property

The most usful properties are offsetTop current top in pixels from the top of the canvas,
offsetLeft, offsetWidth, offsetHeight';

want content lower:
x=document.getElementById('content').offsetTop+10;
document.getElementById('content').style.top=x+'px';

All this positioning is not something I normally care for, but I don't really care where anything is on the page as long as wht the user wants is in front of them, and everything is functional, but for a fixed design you have to control a lot more with code.  

I hope that you are starting to see that CSS is not something that lays on top of the HTML.  The CSS is tightly integrated into the DOM and next to the node collection the stylesheet object is the most powerful object in the DOM.

So if you want to use this sort of approach to show the search enginde something different than the rendering intention.  That is one way to get it done.

One final disclaimer, less I get criticized for proposing something this rigid; after years promoting exactly the opposite.  It's not the way I do templates.  I prefer them about as solid and rigid as spider web, but givving over total CSS control to user preferences is a lot of work and more appropriate for the web apps I do as opposed to public web pages where the users have come to expect more of a flat page look.

Cd&
0
 

Author Comment

by:ddarby14
Comment Utility
Cd&:

I am a visual learner.  Are there any samples you've done that I can see your style that you're referencing?

The abyssmal way most sites are designed is the reason I am tackling this (newbie) and I want to bring a fresh approach, yet give the enduser the experience they expect - which will vary from site to site.  So, dynamic and flexible, but controlled and efficient.

I will try to absorb your post - I don't know if cLFlaVA or I have the knowledge to interpet this into code though.
0
 

Author Comment

by:ddarby14
Comment Utility
Cs&:

cLFlaVA is right...your certifications are impressive...

Thanks for your help and suggestions.
0
 
LVL 53

Expert Comment

by:COBOLdinosaur
Comment Utility
I do Web apps on Intranets.  About the only thing I have floating around at the momement is my anti-tables article:

http://cd-articles.fateback.com/Formsin4.html

I rarily do much with web sites.  There is no money in it right now.

Cd&
0
 
LVL 18

Assisted Solution

by:arantius
arantius earned 140 total points
Comment Utility
Amazingly ugly colors on purpose, to highlight functionality.  Justify thrown in just cause I like it.
View at http://www.arantius.com/ee/Q_21147890.html


<html>
<head>
<style>
#topnav, #header, #footer {
      text-align: center;
      font-size: 1.25em;
      font-weight: bold;
}
#topnav { background-color: green; }
#header { background-color: orange; }
#footer { background-color: purple; }

#content {
      position: relative;
      /*padding-left: 162px;*/
      border-left: 162px solid blue;
      background-color: green;
      text-align: justify;
}
#right {
      float: right;
      text-align: center;
      width: 190px;
      background-color: red;
}
#left {
      /*
      float: left;
      width: 162px;
      */
      position: absolute;
      left: -162px;
      width: 162px;
      color: white;
      text-align: left;
}
</style>
</head>
<body>

<div id="topnav">Top navigation bar</div>
<div id="header">Header bar</div>

<div id="content">
      <div id="right">
            Lorem ipsum dolor sit amet, euismod dictum eu pharetra. Dapibus litora pellentesque pede euismod laoreet vivamus tincidunt class molestie. Suspendisse tristique scelerisque sociis tellus fames tempus fusce, donec etiam ullamcorper tempus. Aptent duis. Lorem amet. Porta class. Vivamus, parturient dolor amet molestie.
      </div>
      <div id="left">
            Feugiat torquent semper nunc ridiculus cum sociosqu amet aptent, potenti vivamus erat. Conubia congue penatibus dapibus. Tellus ac. Volutpat volutpat purus aliquam mauris sed viverra sociosqu porta scelerisque. Vel facilisis mattis a ac magna eros. Imperdiet, torquent gravida nam. Lacinia semper.
      </div>
      
      Scelerisque libero posuere sociosqu vestibulum, mattis senectus. Nulla est penatibus nascetur. Natoque natoque pellentesque sit habitant. Eleifend pharetra rhoncus aliquet scelerisque dignissim suscipit eros curabitur pede. Magna phasellus, hendrerit faucibus. Ultricies purus eget magna faucibus interdum ante. Tempus egestas.
      Ligula auctor suspendisse magnis tellus ante habitant. Wisi sollicitudin aptent magna mi lacinia sapien a volutpat praesent quam duis dolor aptent nullam erat. Convallis curabitur. Nonummy curabitur bibendum commodo adipiscing convallis leo curabitur fusce leo wisi inceptos. Semper primis. Leo etiam adipiscing, parturient fringilla ornare tristique. Aenean justo ipsum.
      Lorem ipsum dolor sit amet, elementum ad aenean ullamcorper vestibulum lacinia neque tellus consectetuer nibh, massa primis. Nostra consequat. Amet integer senectus nulla accumsan pellentesque aenean a vulputate morbi pellentesque, aptent molestie tortor auctor nascetur. Volutpat imperdiet. Vivamus justo. Mollis leo. Felis congue aptent, convallis pretium auctor sapien quis augue sagittis fames proin.
      Odio ultrices. Venenatis id sit tellus magna scelerisque eu felis quam semper. Luctus, augue urna mollis. Nonummy a interdum. Posuere, justo orci montes. Varius, magna mauris felis felis id sed congue pellentesque consectetuer suspendisse luctus tempus. Velit non, maecenas cursus.
      Dapibus pellentesque ridiculus. Dignissim nisl. Cum sollicitudin. Curae aliquam aliquet vestibulum. Augue ac diam. Consequat ullamcorper. Augue, mollis platea elit dignissim litora donec nam pede sed.
      Velit faucibus nulla nulla, lorem parturient pellentesque. Hac mauris sem, mollis lorem magnis pellentesque. Eros lobortis faucibus velit, potenti massa justo ultrices aptent at. Velit phasellus sociosqu natoque. Duis velit pulvinar ad felis erat sit sollicitudin primis fermentum. Class rhoncus neque integer praesent euismod tristique. Venenatis dolor ut magna curabitur nulla fermentum praesent ullamcorper odio varius tellus hymenaeos velit dictum nunc.
</div>

<div id="footer">Footer bar</div>

</body>
</html>
0
 

Author Comment

by:ddarby14
Comment Utility
Hi arantius:

This is the correct layout like cLFlaVA's version, but my goal is to get your "Scelerisque libero posuere" listed first in the html code above the "Lorem ipsum dolor".

Do you think it can be done?

Thx!
0
 
LVL 3

Accepted Solution

by:
OutsideTheBox earned 190 total points
Comment Utility
Okay,  I've written the sloppiest thing you've seen. but it works, sorta ( I didn't finish the IE hacks but it works in mozilla). I do not recomend this approach as a solution. I apoligize for not helping you in any real way other than to toss a concept in.  I just wanted to accomplish your goal with relative positioning instead of absolute as one way to eliminate the horizontal scrolling problem. I too am learning & I just did this to work it out like a student doing a math problem. I gave myself a c- (cause I didn't finish it to correct the differences between IE & everyone else). ;-)
 this is not the way to create a webpage.

1. Content loads first

2. It scrolls horizontal properly.

3. no use of absolute positioning

4. The heights are and must be set in stone(change one & you must change many). content would have to overflow:hidden & use a little scrollbar on the div  to access it (I know, the whole purpose of the webpage is to show the content).

5. Will not yet render correctly in IE but will in Mozilla!

6. making it felt like working on a watch with pliers & a hammer.

7. There is a best solution out there somewhere, keep looking. Are you sure you need content to load first?? if your topnav & header are just text styled in css they would load very quickly and get right to the content. Look at other website out there, ones with heavy headers & mastheads and see what order they list them in the html.

<html>
<head>
<meta http-equiv="Content-Type" content="text/html;

charset=iso-8859-1">
<title>Untitled Document</title>
<style type="text/css">
#Wrapper {
      width:766px;
      height:600px;
      margin:0 auto;
      }
#ContentWrapper {
      width:766px;
      height:450px;
      position:relative;
      top:100px;
      border:2px solid black;
      }

#Content {
      width:466px;
      height:450px;
      position:relative;
      left:150px;
      background-color:gray;
      }
      
#LeftNav {
      width:150px;
      height:450px;
      position:relative;
      top:-450px;
      background-color:blue;
      }
#RightCol {
      width:150px;
      height:auto;
      max-height:450px;
      position:relative;
      top:-900px;
      left:616px;
      background-color:green;
      }
* html #Wrapper #ContentWrapper #RightCol {
      top:-900px;
      }
#TopNav {
      width:762px;
      height:50px;
      position:relative;
      top:-454px;
      background-color:red;
      }
* html #Wrapper #TopNav {
      top:-961px;
      }
#Header {
      width:762px;
      height:50px;
      position:relative;
      top:-454px;
      background-color:purple;
      }
* html #Wrapper #Header {
      top:-961px;
      }
#Footer {
      width:762px;
      height:50px;
      background-color:yellow;
      }
</Style>
</head>

<body>

<div id='Wrapper'>
      <div id='ContentWrapper'>
            <div id='Content'>Main Content</div>
            <div id='LeftNav'>Menu Stuff</div>
            <div id='RightCol'>right column <p>auto height</p></div>
      </div><!-- end ContentWrapper -->
      <div id='TopNav'>TopNav</div>
      <div id='Header'>Header</div>
      <div id='Footer'>Footer</div>
</div><!-- end Wrapper -->
</body>
</html>


0
 

Author Comment

by:ddarby14
Comment Utility
I'll try this and see what happens.

The reason for the content to be first is not for the user, but to test SEO(search engine optimization) to see if bringing the content higher in the html will find favor with search engines that use timout or maximum characters when crawling pages.
0
 
LVL 18

Expert Comment

by:arantius
Comment Utility
It can be done with absolute positioning (the right column also), but you cannot then have the main text flow around the right column.
0
 

Author Comment

by:ddarby14
Comment Utility
I could except that.  Can you post code?

Thanks!
0
 
LVL 18

Expert Comment

by:arantius
Comment Utility
Updated at http://www.arantius.com/ee/Q_21147890.html .  Works in IE6 and FireFox 0.9.3 (and probably up)

Order is navbar, header, main text, left column, right column, footer

Theoretically could get navbar and header below with absolute positioning as well, but it would be very hard to predict the height, and I expect that the two are small enough to make no noticiable SEO difference.

Colors and backgrounds are very ugly.  They're for demonstration purposes.
You'll need to use the solid color borders-as-backgrounds or fix the pixel width of the full content div and use a carefully constructed background image to get nicer backgrounds.
0
 
LVL 18

Expert Comment

by:arantius
Comment Utility
Does that help you ddarby14 ?
0
 

Author Comment

by:ddarby14
Comment Utility
Sorry...I'll review these and post again today.  Thanks for the follow-up :)
0
 
LVL 18

Expert Comment

by:arantius
Comment Utility
How has it gone ddarby ?
0
 

Author Comment

by:ddarby14
Comment Utility
Hey gang...sorry, but I'm having other site problems that are consuming my time.  Ah, life.

All of these solutions worked with subtle differences, though not with the 'ideal' end result I had in mind.

I had also hoped by leaving this question open a little longer, someone else might build upon what we've seen, so with that, I'll split the points, bid adieu and work to dig out of the other Perl hold I'm buried in.

Thanks for tossing this around!  :)
0

Featured Post

What Security Threats Are You Missing?

Enhance your security with threat intelligence from the web. Get trending threat insights on hackers, exploits, and suspicious IP addresses delivered to your inbox with our free Cyber Daily.

Join & Write a Comment

CSS3 Custom checkboxes This article shows how to style the checkbox form element using only CSS. Works in: Chrome, FF, Safari, Opera, IE9+ Uses modernizr.js to check for :checked pseudo class, falling back to plain old checkboxes (IE8 and bel…
Styling your websites can become very complex. Here I'll show how SASS can help you better organize, maintain and reuse your CSS code.
In this tutorial viewers will learn how to position items using CSS's three positioning types Create a new HTML document with an internal stylesheet.: Create another div in CSS and name it Absolute : Type "position:absolute;" and "top:10px; left:50p…
In this tutorial viewers will learn how to style transparent/translucent elements using alpha transparency in CSS Start with a normal styled element, such as a div.: Define its "background-color" property as "rgba (255, 255, 255, .5): The numbers in…

763 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

12 Experts available now in Live!

Get 1:1 Help Now