scriptygoddess

1 | robyn

April 19th, 2002 at 11:26 pm

Girl — you ROCK! And seriously prevented a nervous breakdown this afternoon. Thank you SO much! One of these days I'll get the hang of all this… Thanks again!!!

2 | Lynda

April 20th, 2002 at 9:10 am

Woot! Whatever will get people away from using tables in their design is wonderful.

And as far as I'm concerned, the sooner everyone starts coding like this, the sooner we can GET RID OF those old, inefficient browsers, such as Netscape 4.x.

3 | mark

April 21st, 2002 at 2:45 am

Just a point, you can use ems for absolute positioning as well. In fact, this creates a great effect -ems are basically the same size as your font-size. So if your font-size is 16px, then a 1em-wide box will be 16px, a 2em-wide box will be 32px, and so on. What this means is that, if the user resizes their text (assuming you've used ems or % in defining text to allow IE users to resize), the entire page will resize with it, so nothing looks out of place.

Hmm? Hmm? :o)

4 | Lynda

April 21st, 2002 at 8:55 am

Thanks for the tip, Mark!

5 | marc

April 22nd, 2002 at 11:44 am

how does one center mutliple columns/elements? in CSS

eg: on my weblog page I have three columns. I spent a few days trying to get them to center in CSS and then gave up and put them in a table (I know, bad Marc, but I know squat about coding…)

ta

6 | marc

April 22nd, 2002 at 11:58 am

hmmm – thought about this some more.

would absolute positioning the two side elements (with a % of the page from left an right) and leaving the middle element to do it's own thing work?

might go and have a play……..

7 | marc

April 22nd, 2002 at 12:21 pm

nope…… i'll stop posting now!!

8 | Lynda

April 22nd, 2002 at 12:46 pm

Marc,

You can't do it with absolute positioning as absolute will always want you to pinpoint WHERE it's placed, not just a round-about percentage.

You can do that in relative positioning though:

#centered {
margin-left : 30%;
margin-right : 30%;
border : 5px #000 solid;
padding : 15px;
}

Here is an example of a box centered 30% both on the left and right

Now, if you want to do something like that with three columns, this is what you'd need to do. Create three div tags (I put mine in ID tags, I'm not sure why) – one for each column. Then:

1.) Figure the width of the LEFT column PLUS the left margin.
2.) Figure the width of the RIGHT column PLUS the right margin.
3.) Absolutely position both the LEFT and RIGHT column inside their respective DIV tags.
4.) Relatively position (ie, don't assign a position) the middle column inside its DIV tag.

Here's where the math comes in. for the middle column's div tag, the margin-left should figure as the following:

total left margin of LEFT column
PLUS
total width of LEFT column
PLUS
total desired space between left column and center column

Do the same for the right margin.

Take a look at the code in THIS EXAMPLE for what I'm talking about.

One of the old blue or glish css tutorials actually has the same exact thing posted. I'll try to find it.

9 | Lynda

April 22nd, 2002 at 12:48 pm

Here's the glish tutorial More or less the same thing. There's some trickery involived in getting other browsers to know what they're doing.

10 | marc

April 22nd, 2002 at 1:47 pm

ta very much – i'll have a play around

11 | Row

April 22nd, 2002 at 9:29 pm

This is something I was struggling with a couple of days ago. I worked it out with relative positioning and negative pixels, but it was so inelegant that I simply gave up!

And Lynda, all that maths in your post hurt my head.

12 | Lynda

April 22nd, 2002 at 10:44 pm

It hurts my head too, Row. Every time I sit down to do a design I get a headache. I am NOT a math person.

But it does work. . . Glish explains it better than I do though.

13 | mark

April 22nd, 2002 at 11:12 pm

You can centre block-level elements using negative margins or auto margins (auto margins is the better way, as it's more predictable, and *designed* for this):

div {
margin: auto;
}

This'll only centre horizontally, however (and you'd probably have to define a width, too). Theoretically it should also work vertically, but, well, browsers suck.

14 | Tina

May 22nd, 2002 at 7:54 am

You could also try using percentages for widths… it takes a bit of tweaking, but once everything's right it should resize itself depending on the browser's resolution. It works better on higher resolutions, but it can be done.

On that note… I'm having some trouble with a current CSS sheet, in that for some reason it just doesn't want to take (it's for my first attempt at skinning). I've had this problem before, and I'm really hoping it's got nothing to do with the default MT stylesheets as the last one did, as otherwise it means I'm going to have one big load of trouble skinning my site…

15 | Katie

January 1st, 2003 at 3:29 pm

What is the code to use absolute positioning on a picture or text?? Please help me!

Thank You!
Katie

16 | Position important text logically using CSS » SEO News, Articles & Opinion

November 22nd, 2004 at 4:23 pm

[…] Make sure in MSIE you got to View -> Source to see how it works. Related External Links: How to's: absolute positioning Mimicking Magazine Layouts in CSS Lessons […]