Building a CSS Site within a centered container div

[technica]

Hello... desperately in need of CSS help:
I am trying to build a website based upon CSS, basically following this exact guideline:
http://www.quirksmode.org/css/centering.html
So basically I have my container div which is centered, and I am using absolutely positioned layers within it. The thing is, I am having trouble adding new layers to fit within the container div. I know how to make the container larger to accomadate new layers, but I am having trouble figuring out how to make new layers fit within the container. Do I have to put new layers in a certain order within the container div? (the HTML I mean)

<div class="container">
	<div class="left">
		Top content
	</div>
	etc.
</div>

In what order should I list my layers? Does it matter? Does the listing affect how the layers are positioned relative to one another? I thought they didn't, but now I don't know.
Building off the basic design on that website, I wanted to have a bottom layer that included information like a copyright and random links. In addition to that, I needed to add layers within the left content box...
Any help you can provide would be much appreciated.
Thanks and happy new year!

-Becky Gessler

[frogmanandy]

becky I like your site, plus u r pretty cute

lol

center your site with

mainsiteall {
margin-left: auto;
margin-right: auto;
width: how many everpx;
text-align: center;
}

[richkoi]

Have a look at my CSS style sheet. I think it does what you are trying to accomplish:

http://www.richkoi.com/layout.css

Rich

[iany]

I too am delving into the morass of CSS.
The experts on this can be found through Eric Meyer's awesome discussion group at http://www.css-discuss.org/

The archives have all the answers you are likely to need plus if you subscribe to the forum you will find someone who will answer your questions within a few minutes (yes). Downside is that you can receive some 50-60 emails a day.

You do have to be careful with CSS as IE6 doesn't always render faithfully. I assume that you are using Firefox 1.5 as your development tool?

Hope this helps.

Ian

[Deep13]

for footer set the property as clear:both;

so it will have effect like colspan=xx in table..

I would suggest generating your layout using CSS Layout Generator

I hope this helps you.
Deep

[MrLeN]

Use tables.

MrLeN

[MeanSEO]

I am playing for the first time with CSS on a site I am just starting (http://www.mysmokies.com) and I am having interesting quirks with IE - especially with the new IE 7 beta.

By removing tables, my code is much cleaner and hopefully much more SE friendly but there is a learning curve.

One of my issues is I wanted to put the "navigation" dive lower in the code and have the content higher. Works great in everything other than IE so for now I have to leave it in the order that IE likes it :(.

[MrLeN]

Don't listen to anyone. Just listen to me. It is fine to use tables and they are great for SEO. What you need to do is use what is best for you. Use the method that is easiest to implement and maintain.

Trust me mate. I have been down this road. Boy, have I been down this road. I know how to make Table and DIV layouts just as well as anyone around this joint. And I am telling you that your approach is going to cause you grief.

If you're making a simple page, DIV's are fine. If you just want to add a box here or there or create containers for certain parts of web pages, then DIV's are great. But the fact of the matter is that no matter what ANYONE says, including W3C.. Tables are fine. Use them! Save yourself heartache!

For the type of site you're building, ONE table will use much less code than DIV's inside DIV's floated left and right and absolutely positioned etc. What an absolute night mare - and all for nothing.

Just do what is most simple and get on with your project. Believe me.

I am not anti 'DIV'. I am not PRO 'table'. I am for what works. Tables are by NO means done with. Don't let DIV crazy nuts fool you. Use both, depending on what you want to do. You should take my advice, which I learned after hand coding for 5 years - daily. I know what I am saying. I know everything off by heart.

Oh, and you can do EVERYTHING to tables that you can do with DIV's. Apart from some positioning things which are already built into Table functionality and have been for ages.

You can adjust background colors, widths and heights. You can absolute position them. They are 1000% easier to use than DIV's for multi column websites. You can specify 100% height, no problem. You can center them on the page, no problem. As a matter of fact, you can make a tabled layout with even LESS code than a DIV layout.

I've seen some sites created totally from DIV's that have several columns, absolutely positioned DIV's all over the place. Why?? They've just gone way overboard. They could achieve the same results, in 1/10th of the time with a table.

MrLeN

[JuniorOnline]

MrLeN - I dont think using tables actually help. Our website used tables for over 2 years and it got us no where. Once we implemented the CSS, we are now showing in GOOGLE an area which was a total no no for us at the time. ;))

so noooooooooooooooooo for tables.. they are your worst enemy

[MrLeN]

Right!

MrLeN

[smo]

I don't think because of CSS you can do well in Google. There is something else which has helped you in ranking at google.

I try to keep all my style commands in external style sheet and use table for body positioning. By keeping my javascript and styles in external files I improves the tags ( codes ) to content ratio.

[MeanSEO]

Originally Posted by JuniorOnline

they are your worst enemy

I wouldn't go that far!

I have had sites that ranked great with tables. There is no reason to make excessive tables when other techniques will do, nor should you bang your head against the wall with some aspects of CSS which don’t have great cross browser compatibility.

Moderation is the wining mantra.

[dartcol]

I've alwasy been a fan of Dave Shea's ( www.mezzoblue.com )
Here are a few links to get you started:

http://mezzoblue.com/archives/2002/12/12/effects_of_c/
http://mezzoblue.com/archives/css/
http://mezzoblue.com/archives/2003/04/23/centering_ab/

[KeithO]

not sure if the original question was answered but to center something within a div use

margin: 0 auto;

[/code]

[dartcol]

Unfortunately, it doesn't work in IE. This is where those who enjoy tables get smug! :)

[aventvoy]

I don't know much about DIV and all the complexity of CSS, but I know that Google doesn't hate websites using tables. Ours is within the first five results on gg on all search terms relevant to our activities. And I only use CSS for font, size, h1, colors and such basic coding... So saying that tables are "the worst enemies" doesn't make any sense at all! HOwever, I can easily understand and see where and when CSS are a + as they somehow reduce coding, that's right.
So I'll keep learning about Css and stuff...
Aventvoy

[MrLeN]

I just built a site (which I started two months ago) which has a top 10 ranking (mostly top 3 rankings) for all of its very popular and sought after search terms and products, in Google MSN and Yahoo.. attracting thousands of uniques every day and between 2-5K a day in orders each day(so far).

But this time in 6 months orders will be more like 20K a day, because the site was built for a company that sells summer products.

The site uses tables EXCLUSIVELY, but only a DIV here and there.

MrLeN

[dartcol]

It's horses for courses surely. Some people find coding using CSS faster and cleaner than using tables. Others prefer the opposite. Personally, I use a mixture but try to keep the use of tables to stats etc. Saying this, I'd never prevent myself from using tables for the sake of CSS purity.

For those who know one or the other it's worth learning how to do sites using both as you may be needed to produce both at work.

[KeithO]

Originally Posted by dartcol

Unfortunately, it doesn't work in IE. This is where those who enjoy tables get smug! :)

css file:

#wrapper { margin: 0 auto; }

html:

<div id="wrapper">
<table>...</table></div>

[technica]

My first site was completely tables. I'm using CSS now, and it's working for me much more than tables ever could have. I'm trying to stick away from tables, but I may end up with one or two on a page, within my layers.
After starting this post, I see how far it's gone. Wow. Thanks for your help everyone. Currently my template type page for my new site looks like this:
http://www.wethegeeks.com/wtgcenterbgheader.html
All CSS, but I still have some stuff to change anyway, so you may see a table or two.

[N30]

This is the css code i've recently been using to center css sites & it works in later versions of IE

body { margin: 0px; padding:0px; text-align:center;}

#wrapper { width:770px; margin:0px auto; text-align:left;}

<div id="wrapper">

All your relative divs go in here.

</div>

Hope that helps ;-)