Welcome to WebmasterWorld Guest from 54.167.175.107

Forum Moderators: not2easy

Absolute positioning

correct me if I'm wrong but...

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

WebmasterWorld Senior Member 10+ Year Member



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?

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

10+ Year Member



Yes.

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

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

WebmasterWorld Senior Member 10+ Year Member



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.

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

WebmasterWorld Senior Member 10+ Year Member



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.

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

WebmasterWorld Senior Member 10+ Year Member



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.

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

WebmasterWorld Senior Member 10+ Year Member



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...

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

WebmasterWorld Senior Member 10+ Year Member



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.

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

WebmasterWorld Senior Member 10+ Year Member



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...

 

Featured Threads

Hot Threads This Week

Hot Threads This Month