[vbsaltydog]

I am trying to make a css layout that is similar to a 2 column layout with a header and a footer with the main content div positioned absolutely so it shows at the top of the html output and this seems doable until I throw this in.... I want the entire layout to be 800px wide and centered with liquid expansion as the main content is dynamically generated and has varying heights. This is easy with tables but I want the css for cleaner code and content positioning for seo purposes. This goal seems unattainable in css without great effort due to cross browser complications and limited functionality of css regarding centering (positioning without using left or right indexes) for absolute divs.

I would like to do this in css if it can be done. Please assist if you are able.

Thank you

[jfulton]

give the body text-align:center; and then put all of your content in a "wrapper" div with:

Code:

width: xxx;
margin-left:auto;
margin-right:auto;
text-align:left;

Then you can set your column widths inside of the wrapper. Does that help at all? Also, you might want to check out a similar technique on glish

[vbsaltydog]

glish was a good link, thanks. It seems that your reply helped alot for css layouts centered in the viewport but then how do you accomplish putting the main content div above all else in the html output for SEO reasons?

My main reason for moving from tables to divs is for the ability to move my keyword rich content where I want it in the code for the spiders while keeping the visual output looking good but this is proving to be harder than once thought.

Any help from anyone on this is certainly appreciated.

[jfulton]

First, you might want to double check and make sure that putting the content earlier in the document will actually increase your page rank. I could be way off as I haven't read much lately on SEO, but I feel like the effectiveness of that trick is beginning to be fade as search engines become smarter.

Anyways, you should be able to "move" your content around using positioning, margins/negative margins, etc. As long as everything is in a "wrapper" the width and centering shouldn't be much of an issue I wouldn't think. Is there a specific issue you're having problems with?

[vbsaltydog]

Thanks for the input. I do a fair amount of SEO for clients and content placement is still an important on page factor. The ability of using CSS to improve the content placement as well as increasing the content-to-markup-ratio by using lighter/cleaner code is well worth the effort.
I am somewhat comfortable with most of the aspects of CSS with respect to styling however, I am looking for info on layout options. Specifically how to use positioning to have my code show in one order and be able to present the info where I need it which I see is not all that hard with pages that are a fixed height/width but my issue at the moment is how do I position a div absolutely so it can be at the top of my code while showing it inside of a liquid section of my page so that the other containers on the page move accordingly when the height of the absolutely positioned div contents grow in length as the contents of the absolutely positioned div are dynamically generated and vary considerably in height.

Thanks again for all of your help.

[jfulton]

Ah, I think I understand a little better now. Generally speaking, a website has a fixed height header, a variable height "content" section, and some kind of footer. If you know the height of the header, then you can just position the content absolutely and give it a top-margin equal to the height of the header. Getting the footer could be a little trickier depending upon where it is in your HTML document.

If you show us what you have so far (or a general skeleton for you html doc), maybe we could point you in the right direction.

(Also, just to note that if you're willing to use Javascript, this whole thing should be fairly easy to do.)

[vbsaltydog]

I have no opposition to using javascript. The site is www.classicboardco.com (the main splash page is hard coded and does not apply to this project)
I understand the absolute positioning in regard to the distance from the top of the viewing area as this can be easily set by pixels. My current header image is 121px tall so I set my absolutely positioned div (content div) to top-margin: 121px, this part is easy but its the left-margin that messes me up when viewing the page using different ratios (anything other than 1024x768) and of course the fact that the html layout is liquid based on tables and the absolute div wont stretch within the tables, this is where the help is needed.
Would the CSS display property for tables, table rows, and table cells be the answer for this? I am new to CSS layout methods so forgive my ignorance on the subject.

Thank you for your help. It is appreciated.

[jfulton]

Hey salty,

I'm not sure I totally understand your question.

Originally Posted by vbsaltydog

...the left-margin that messes me up when viewing the page using different ratios (anything other than 1024x768) and of course the fact that the html layout is liquid based on tables and the absolute div wont stretch within the tables, this is where the help is needed.
Would the CSS display property for tables, table rows, and table cells be the answer for this? I am new to CSS layout methods so forgive my ignorance on the subject.

The only thing I'm seeing wrong with the site is that if I shrink the browser size down low enough, the header and footer both shrink a little bit smaller than the content of the page. Because of the table layout, I can't really tell what is going on by looking at the HTML and I am on a 12" PowerBook right now (without all of my Firefox developer tools!) so I'm not exactly sure how the tables are messing up your layout...

One thing which may be causing a lot of your problems is using the tables...think about it. You want the content of your page to appear first in the html, but not in the flow of the web page. No problem - you can get it to appear where you want by using css. But you are using a table to control the layout of your page. Now you are limiting yourself as to which content can go where. By using the table to control the layout of your page, the style and layout (which should be controlled by css), is dependent upon the html code (the table and child tags.)

Getting css to work properly with tables (and some of the deprecated tags you have in there like <center>) can be a huge hassle. If you're really concerned about having the content of the page first in the html, then I'd suggest eliminating the tables and using css only for the layout, otherwise there is a huge dependency between the two...

[vbsaltydog]

Thanks for the feedback. I was looking further into css layout techniques, specifically absolute vs. relative positioning and decided that I had two possible routes to take.
I could use absolute divs and then use javascript to point to different stylesheets depending on the screen resolution detected or I could use relative positioning so I decided to go with relative positioning.
I have basically taken out many of the tables and replaced them with divs and then centered all of the divs on the page, let them show as they would using the normal flow and then changed the positioning to relative and scooted the divs around to show the way I want. I am fairly happy with this as it lets me control the content positioning in the source but I do have a large empty area under where my page footer ends due to the relative positioning. Can you CSS gurus have a look at my pages and offer some advise as to how I can clean this up?
Also, the pages look fine at 1024x768 and above but the left menu and content section are a little offset in 800x600, could you guys have a look at this and offer points on why it may be doing this?
I would also greatly appreciate if everyone reading this post could view http://www.classicboardco.com/cat/element_decks.html and reply back if the page rendered OK in their browser or not as I am only able to confirm this on my local machine (15" monitor) using IE5 and Firefox on a few screen resolutions and I would like to know if its showing OK on larger/smaller screens, flatpanels, laptops, etc.
Just a simple reply with good or bad, screensize, resolution, and browser would be a huge help.

Thanks to everyone,

-vbsaltydog