homepage Welcome to WebmasterWorld Guest from 54.163.91.250
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member

Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

    
Absolute positioning
correct me if I'm wrong but...
mipapage




msg:1185277
 7:52 pm on May 8, 2003 (gmt 0)

Okay, I'm sold on Absolute positioning, but one q:

For arguments sake, a three column layout, no header or footer. #left, #center, #right. I position the right hand column by using 'right: 0px' for example, the left using 'left:0px', and do somethig with the center column, whatever floats your boat (no pun intended...).

Now, if someone comes along with one of these gigantic monitors at like 1200x1600 res or greater, and they view my page with a 'maximized' browser window, will the right column and left column not begin to occupy different time zones, and the center column, depending on how you do it, appear like a tootsie roll being pulled at by two kids at halloween?

 

Longhaired Genius




msg:1185278
 8:11 pm on May 8, 2003 (gmt 0)

Yes.

I don't use absolute positioning. But if I did, I would position everything relative to the top left corner of the page.

drbrain




msg:1185279
 8:36 pm on May 8, 2003 (gmt 0)

If by absolute positioning you mean { position: absolute; } then it depends.

if you have:
#left { position: absolute; top: 0px; left: 0px; }
#right { position: absolute; top: 0px; right: 0px; }
#center { /* no rules */ }

Then #left and #right will be positioned to the left and right, of the viewport and expand to whatever their content box requires and #center will be overlapped by the #left and #right elements. Giving #left and #right fixed widths, and #center a fixed margin, #center will grow like you fear.

To prevent overlap, give #left and #right a percentage width, and give #center left and right margins to match. #center will now take the same percentage of space as it did before.

The third option is to give #center a width and auto margins: #center { width: 200px; margin: 0px auto; } This will cause white space to grow between #left, #center, and #right. #center keeps its width. By changing a left or right margin to a fixed value, #center will always stay that far away from #left or #right.

If you use relative positioning, it is difficult to achieve a three-column effect, because the boxes are still rendered in normal flow. You have to know exactly how high each block box is and move the next block box's top edge up by that many pixels. Absolute positioning takes the box out of normal flow, so you only have to worry about overlap, but that is easy to take care of.

mipapage




msg:1185280
 9:26 pm on May 8, 2003 (gmt 0)

Longhaired Genius

That's what I was wondering. It can be quite a discussion, but more and more I am leaning towards absolute positioning unless I have to do something that requires the use of floats.

There are a lot of layouts out there that use 'right: *px;' or some variation thereof, and I don't see these as being 'foward friendly' to future monitor sizes and resolutions.

So, no 'right: 0px;' for me then.

drbrain, thanks for the tips.

grahamstewart




msg:1185281
 10:50 pm on May 8, 2003 (gmt 0)

Just specify your columns as percentages (as drbrain suggests).

e.g.

#left {
position: absolute;
top: 0;
left: 0;
width: 25%
}
#right {
position: absolute;
top: 0;
right: 0;
width: 25%
}
#middle {
margin: 0 25%
}

That way they will expand relative to the window size.
And if you want to add images in the columns then make them width 100% (don't specify a height) and the browser will scale them for you.

But dont worry about it too much, from what I've seen and heard, most people who use a resolution larger than 1024x768 never browse with full-screen window.

I would position everything relative to the top left corner of the page.

Which means you'd be designing a fixed width layout because you would have to decide exactly how many pixels from the left you want to put the right column.

mipapage




msg:1185282
 8:09 am on May 9, 2003 (gmt 0)

Thanks again grahamstewart,

fwiw, I've got a good handle on how to make a fluid layout, what is worrying me is that using right:0px will wind up looking hokey in larger resolutions.

But dont worry about it too much, from what I've seen and heard, most people who use a resolution larger than 1024x768 never browse with full-screen window.

This gives me some consolation, but I'm still a bit concerned...

grahamstewart




msg:1185283
 9:39 am on May 9, 2003 (gmt 0)

You could specify a
max-width on body if it will make you feel better.

But unfortunately current versions of IE will completely ignore it :(

If you specify the widths as percentages (as in my example) then your center div will be less than 800px wide on a 1200x1600 display, which should still be perfectly readable.

mipapage




msg:1185284
 10:50 am on May 9, 2003 (gmt 0)

Gotcha,

Well it seems what you guys are saying is finally getting through my thick head.

I'll toy around with some of these settings and see what happens, I would like to use the 'right: xpx' setting...

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved