I'm finally making some kind of effort to make a complete website in CSS, but I can't quite do what I want. I've used CSS for fonts, forms, and backgrounds for years, and now it's finally time to start using it for layouts. I know how it works, it's more like I don't know the bit of code to make what I want, and I'd rather inspire debate than go looking for a quick fix on google.

Basically, I want to make the CSS equivalent of a table with 3 columns, that fills the height of the page like a table set at 100% would, and one of the columns is at 100% so it fills as much as it can before the other 2 columns can't squish up anymore. This is my effort thus far:










But that doesn't work quite right, and the results are completely different in IE and firefox. I tried making the positions 'abosolute', giving them a 'z-index' and correct top and left positions, but it still looks naff. Is there any way to do what I want? There should be, it's a basic requirement of a website to be able to do this.

gamesfreak wrote:
> If only IE was fully CSS2 complient, it'd make everyones life easier.

http://dean.edwards.name/IE7/
Complete set of scripts to include on a sever to make IE6 behave properly to CSS and DOM.

Do what Tyla said and don't focus on IE, for now....

Firefox/Mozilla etc will be your reference points for css0ring, then work downwards until it works with the crapness of IE.

If only IE was fully CSS2 complient, it'd make everyones life easier.

You'll pick it up in no time and it actually becomes quite fun and interesting.

If this place had emoticons, we'd overload the image server.

monkey_man wrote:
> Yes...I actually made that joke...



lol!;)

Yes...I actually made that joke...

Lol...

Tyla wrote:
> Welcome to the world of CSS.

"Emergency exit doors are located hereand here"

FWIW: Basic 3 colum layout (touching columns)

#left {
position: absolute;
top: 0px;
left: 0px;
margin: 0px;
padding: 10px;
border: 0px;
background: #666;
width: 190px; /* ie5win fudge begins */
voice-family: "\"}\"";
voice-family:inherit;
width: 170px;
}
html>body #left {
width: 170px; /* ie5win fudge ends */
}
#middle {
padding: 10px;
border: 0px;
background: #666;
/* ie5win fudge begins */
margin: -20px 190px 0px 190px;
voice-family: "\"}\"";
voice-family:inherit;
margin-top: 0px;
}
html>body #middle {
margin-top: 0px; /* ie5win fudge ends */
}
#right {
position: absolute;
top: 0px;
right: 0px; /* Opera5.02 will show a space at right
when there is no scroll bar */
margin: 0px;
padding: 10px;
border: 0px;
background: #666;
width: 190px; /* ie5win fudge begins */
voice-family: "\"}\"";
voice-family:inherit;
width: 170px;
}
html>body #right {
width: 170px; /* ie5win fudge ends */
}

Firstly, try not to think of positioning like using tables, you'll go around in circles. Using spacer cells in tables is replaced in CSS by padding, margins, floating and borders.

You'll need to read up on the HollyHack, The Box Model Hack and clearing nested floats using :after before you'll succeed in maintaining uniform display across browsers.

z-index is great for positioning "fixed" elements, but really hinders floated elements as you placing them on separate layers from each other removing their relationship.

FWIW, ignore IE for now and concentrate with Firefox as this has full support for CSS1/2 (albeit not full support for nested floats, but thats a quicker hack than in IE). Don't use anything in your CSS that's not widely used as support in NS6/7, MacMSIE, Opera & Safari are all crap and no where near where they should be, so this rules out attribute selectors for a start;

#id [type=attribute] {}

Remember, YOU HAVE TO DECLARE A DTD in all of your pages and in the case of MSIE6, use xHTML Transitional to ensure IE6 uses compliance mode and not quirks mode in it's CSS rendering or you'll be fighting a loosing battle.

Some good reading:

http://dean.edwards.name/IE7/
Complete set of scripts to include on a sever to make IE6 behave properly to CSS and DOM.

http://www.positioniseverything.net/easyclearing.html
Clearing Floats without structural markup

http://www.quirksmode.org/
Complete list of bugs and quirks in IE including CSS, DOM, Javascript

http://glish.com/css/
Layouts

http://www.thenoodleincident.com/
Covers layouts and the famous CSS panic guide.

And for anyone with an iPod:
http://www.westciv.com/news/podguide.html

Most of all, remember to keep your markup semantic, clean and free from in line styles. Effectively you should aim using only DIV, H1-6, P, STRONG, EM and SPAN (obviously things like IMG, UL, OL, DD, DT and OBJECT are standard too). This will make life easier debugging your CSS in the long run as well as making life so much more simple when applying new styles to your site. try avoiding using "_", "-" & numbers in CSS declarations and study specifity as you'll suddenly run into problems with inheritance of styles.

Specifity is about the weight of a declaration in relationship to it's sibling/child/inherited elements;

.class
is less important than

p.class
which is less important than

div#x p.class
which is less important than

html>div#x p.class
And so on.

Anyway, that should be enough to either put you off CSS for life or give you a few good staring points in the mine field of CSS layouts.

Welcome to the world of CSS.

Anytime, my furry friend.