CSS positioning help

edbarton · 04-12-2004, 02:44 PM

I have been trying to get things to work for ages in css, but things can get very hard. I have a layout 750 pixels wide with numerous items on the same row (all in different div tags), absolute positioning will be stupid (I think) as it will cause things to appear in different places on different resolutions, and surely I just can't float everything on the left.

Are there any tips for making fixed size css pages with numerous div tags on one row?

greg · 04-12-2004, 03:24 PM

absolute positioning will not cause things to appear in different places. it will all be the same place.

the very top left corner of yoru screen is 0,0, and it goes from there. the only thing different in resolutions is that things are more compacted. so because of that it will show up exactly like non-expandable tables. You can also make css div elastic if you wish.

edbarton · 04-13-2004, 03:12 AM

Yeah, I know. I forgot to say that I want to centre it in the screen. That is why the left and right pixel numbers will vary with different resolutions.

I did try making it elastic, but the results with my template didn't work very well, so I've decided a fixed layout will be better for it.

Jazzee · 04-13-2004, 06:54 AM

You could put a 750 px div around around the page and center it. Put everything inside of that.

edbarton · 04-13-2004, 07:26 AM

Thats the thing though, I need to position the items inside of that. Is there a tag that can do like left of the so and so.

edbarton · 04-13-2004, 08:40 AM

OK, I'm trying this http://www.quirksmode.org/css/centering.html as it seems to work.

Basically, it involves placing the site in a table tag. I didn't want to have to do this but due to IE being <insert word here> I have to.

I'll report back to you, on whether I can make it work or not.

Jazzee · 04-13-2004, 08:47 AM

Wait. You are putting the site inside a table to center it for IE? You don't have to do that.
If you put the whole thing iside of an extra <div> tag you can put a text-align: center on that <div> with a width of 100%.

The inside <div> will then be centered.

edbarton · 04-13-2004, 09:11 AM

Nice it worked. Thanks for that Jazzee.

If it works, this will be my first proper css positioned design.

Jazzee · 04-13-2004, 09:11 AM

Cool

Distorted · 04-15-2004, 08:44 AM

One method that I use is to position an element absolutely from the left and the right.

So, you could make something appear to be centered, but it's really just stuck a certain amount of pixels from the sides. So, not only is it centered, but you have a lot of control on exactly how it will look.

You can even make the element be farther from one side than the other this way.

Jazzee · 04-15-2004, 08:57 AM

Distorted - That will look different on different resolutions, though, no?

Distorted · 04-15-2004, 09:52 AM

That's the point. It will make it completely fluid, while still being a fixed number of pixels from the sides and/or being centered.

edbarton · 04-15-2004, 10:30 AM

Don't want it to be fluid though.

PhilC · 04-25-2004, 05:29 PM

One site I checked out put the whole content in one big div. This big div he centered using 'auto' as value for both left and right margins. It seems to work fine. Go figure.

PhilC · 04-25-2004, 05:30 PM

Ofcourse they also set a fixed width too ...

Jazzee · 04-25-2004, 07:25 PM

Quote:

Originally Posted by sfxmystica

One site I checked out put the whole content in one big div. This big div he centered using 'auto' as value for both left and right margins. It seems to work fine. Go figure.

I don't think margin: auto works for IE.

Vulko · 05-03-2004, 02:10 PM

I'm not sure in syntax...
<div style="position: absolute 50% 50%">