28 replies [Last post]
dio5
Offline
newbie
Last seen: 14 years 41 weeks ago
Joined: 2005-10-25
Posts: 10
Points: 0

Hey
I want to have a position fixed div that contains 4 other divs.
How do I make this? I mean, how do I make the others relative to the fixed one?

<div id="leftcontent">
<div id="pic"></div>
<div id="menu"></div>
<div id="submenu"></div>
<div id="leftent"></div>
</div>

so all these should be fixed.

thnx

ClevaTreva
ClevaTreva's picture
Offline
Guru
A hilly place, UK
Last seen: 1 year 39 weeks ago
A hilly place, UK
Joined: 2004-02-05
Posts: 2902
Points: 0

FIXED CONTAINER DIV

Hi

So, by using position fixed, you aren't bothered that IE users won't get it? It's a nice css attribute that that old clunker IE doesn't support.

Trevor

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 6 hours 23 min ago
Dallas
Timezone: GMT-5
Joined: 2004-06-25
Posts: 9761
Points: 3843

FIXED CONTAINER DIV

In addition to not grokking {position: fixed;} (IE treats fixed as absolute), it requires that the reference element have hasLayout. An element has hasLayout=true if it has a declared width or height of any value, or is float right or left, or has zoom of any value, or has {display: inline-block;}, or has {writing-mode: tb-rl;} or {position: absolute;}.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

kongknabe
Offline
Regular
Last seen: 14 years 37 weeks ago
Joined: 2005-11-23
Posts: 33
Points: 0

FIXED CONTAINER DIV

If I understand you correct you are actually looking for the same as I am in the thread "advanced position problem".

You want a fixed left menu while the rest of the page scrolls?

Hmm.. What screen resolution are your page optimized for? - if you can settle for 800x600 (and accept that it might look ugly in resolutions below this) I might have the solution Smile

kongknabe
Offline
Regular
Last seen: 14 years 37 weeks ago
Joined: 2005-11-23
Posts: 33
Points: 0

FIXED CONTAINER DIV

Do you have a link to your site?

dio5
Offline
newbie
Last seen: 14 years 41 weeks ago
Joined: 2005-10-25
Posts: 10
Points: 0

FIXED CONTAINER DIV

well.... I finally end up with this, using a hack for IE,
see: dio5.com

dio5
Offline
newbie
Last seen: 14 years 41 weeks ago
Joined: 2005-10-25
Posts: 10
Points: 0

FIXED CONTAINER DIV

must admit though, that I actually didn't care for low resolutions...
so it is best viewed in 1280X960 or higher... :twisted: Laughing out loud

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 5 years 42 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

FIXED CONTAINER DIV

dio5 wrote:
must admit though, that I actually didn't care for low resolutions...
so it is best viewed in 1280X960 or higher... :twisted: Laughing out loud

That's like saying you don't care if 80% of your Internet users can't see your site properly. :roll:
Also, is there s'posed to be more than 3 links under My Links, cos if there is, they're being cut off by FF (the bottom link is partyly obscured by your footer as well).

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

dio5
Offline
newbie
Last seen: 14 years 41 weeks ago
Joined: 2005-10-25
Posts: 10
Points: 0

FIXED CONTAINER DIV

well there are only 3 links now... and I can't tell how it would look on a little screen... I checked on 1024x768 but I have only a 19inch and a 21 inch so mostly work on higher resolutions.
So that's too bad for users with a small screen. Guess that most people who would visit my site are mainly people who work on greater res... I personly don't know anybody who still has 800x600...
So if I had to make a site whose target audience were a large number of people with older, smaller screens off course I would make sure it looks ok for them... but for this nope...

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 5 years 42 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

FIXED CONTAINER DIV

dio5 wrote:
Guess that most people who would visit my site are mainly people who work on greater res.

That's just it. It's a guess. There's no way you can be sure. I know quite a few people who still use 800 x 600 and whose monitors aren't at all old. But if you're happy to live with that, that's your choice.

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

dio5
Offline
newbie
Last seen: 14 years 41 weeks ago
Joined: 2005-10-25
Posts: 10
Points: 0

FIXED CONTAINER DIV

yes I know it's a choice. Like said before, if it would be a commercial/bussiness-site, then I would take it in account... but this is just a little play-around actually more for myself...
On top of that, it is hard to make something look really ok on a 800x600... or one should make more design depending on the user's resolutions.

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 5 years 42 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

FIXED CONTAINER DIV

dio5 wrote:
On top of that, it is hard to make something look really ok on a 800x600... or one should make more design depending on the user's resolutions.

So far, nearly all the sites I've done have been done with a minimum screen res of 800 x 600 in mind.
It's also an established fact that reading comprehension decreases for longer line lengths (think of most books - usually about 12-15cm wide and if they're wider, the text is split up into two columns).
So if you're designing a layout for bigger screen res you need to be aware that you might need more columns to keep the line lengths at a readable width.

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

dio5
Offline
newbie
Last seen: 14 years 41 weeks ago
Joined: 2005-10-25
Posts: 10
Points: 0

FIXED CONTAINER DIV

well, you're probably right...you re the pro...
and this is my first real full css stuff, so...

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 6 hours 23 min ago
Dallas
Timezone: GMT-5
Joined: 2004-06-25
Posts: 9761
Points: 3843

FIXED CONTAINER DIV

One other consideration for you; browsers don't have to run maximized. I, for one, find it annoying to do so. My monitors are 1024×768 and 1280×960 resolution, but I nearly always run my browsers at 800×600. I run other apps at less than max size for the same convenience in stacking or tiling on the desktop[1]. It usually p*sses me off when web sites require that I resize or h-scroll to use their pages. Unless there is compelling reason that enhances my, the user's, experience, pages should render well at least as small as 800px wide.

cheers,

gary

[1] Text editors and MUAs at 80 chars wide and a convenient number of lines, word processors and pdf viewers at 9 inches wide, spread sheets just large enough for the issue at hand and cli windows at 80 chars.

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

ClevaTreva
ClevaTreva's picture
Offline
Guru
A hilly place, UK
Last seen: 1 year 39 weeks ago
A hilly place, UK
Joined: 2004-02-05
Posts: 2902
Points: 0

FIXED CONTAINER DIV

kk5st wrote:
One other consideration for you; browsers don't have to run maximized. I, for one, find it annoying to do so.

Same here Gary. I NEVER have the window maximized.

dio5
Offline
newbie
Last seen: 14 years 41 weeks ago
Joined: 2005-10-25
Posts: 10
Points: 0

FIXED CONTAINER DIV

So a lot of websites won't work for you guys... what about really pieces of art ..? like some flash websites? So they're all wrong in your eyes because they have to fit in every browser window.
Some things are just meant to see on a full screen browser maximized and I really don't see what's wrong with that. If you don't like it, don't look at it.

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 5 years 42 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

FIXED CONTAINER DIV

You can design your site to be fluid which means it'll stretch to fit whatever resolution you're running.
(Your Flash example is a poor one by the way because they're not nearly as prevalent now as they once were and a lot of the ones that are still around aren't very good examples of current web design practices.)
I can't think of too many sites I've visited where they've obviously been designed at a resolution larger than what I'm running on, i.e. they're so large that I get a horizontal scrollbar.

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 6 hours 23 min ago
Dallas
Timezone: GMT-5
Joined: 2004-06-25
Posts: 9761
Points: 3843

FIXED CONTAINER DIV

dio5 wrote:
So a lot of websites won't work for you guys... what about really pieces of art ..? like some flash websites? So they're all wrong in your eyes because they have to fit in every browser window.
Some things are just meant to see on a full screen browser maximized and I really don't see what's wrong with that. If you don't like it, don't look at it.

Define full screen. I just ran some stats from a webbie/tech oriented site, where I would expect to see larger, more modern monitors. The 1600 wide screens were less than 2% of the visitors. 1280 wide screens were 45%, 1024 wides were 40%, and the balance were 1400, 1152 and 800 wide. There were as many 800 screens as 1600.

So what will you design for? 1600 and cut out 98% of the potential audience? 1280 and lose 53%? 1024? If you're down to 1024, why not 800?

Let me talk about viewing distance and angle of view. In the years I worked as a professional photographer, I learned an important principle; the optimum size for a print is related to the viewing distance. The eye can comfortably take in a little less than a 30° angle of view. (The total angle of view is about 50°, and the 'normal' lens on most cameras takes in about 40°. A slightly 'wide angle' lens takes in about 54°. Most portrait photographers consider a 25° angle of view to be a more true 'normal', with little angular distortion[1].)

The normal, or most common viewing distance for a computer monitor, so I have read, is 15". Translated to a comfortable viewing angle, that's

15(2tan(30°/2))=8.0385"

At 96px per inch (ppi), that's 771.6937 pixels. If your 'art' is appreciably wider, your viewer will be uncomfortable and will (un)consciously move back from the screen.

Now, as to 'really pieces of art'; they are really few and far between. If a Flash animation is the content, that's one thing. But, if it's a part of the design, it likely detracts from the site by slowing things down. If it has functionality, a menu, eg., it for sure causes accessibility issues.

As long as it's your site, feel free to do what you want. Just shrug off the criticism from those of us who consider usability and accessibility to be important. If you're coding for someone else's site, you need to lose the artsy-fartsy attitude and use your design skills to complement and augment the function of the site.

cheers,

gary

[1] The stretching you see in wide-angle shots, and the compression you see in telephoto shots.

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

kongknabe
Offline
Regular
Last seen: 14 years 37 weeks ago
Joined: 2005-11-23
Posts: 33
Points: 0

FIXED CONTAINER DIV

kk5st wrote:
pages should render well at least as small as 800px wide.

I don't understand this.... It is ridiculus to dictate what pages should do considering the wide aspect the Internet applies to. - The design of the page, and the way you view it depend on the content! - Some sites are merely text documents and some sites are almost applications..! - I bet that you wouldn't use an application like Photoshop in 800x600 if your actual screen size were 1024x768.

- Content dictates design, and the Internet is more than a way to share text documenets!
.

kongknabe
Offline
Regular
Last seen: 14 years 37 weeks ago
Joined: 2005-11-23
Posts: 33
Points: 0

FIXED CONTAINER DIV

- The Internet can actually be about experiences, and not only efficiency!

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 5 years 42 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

FIXED CONTAINER DIV

kongknabe wrote:
kk5st wrote:
pages should render well at least as small as 800px wide.

I don't understand this.... It is ridiculus to dictate what pages should do considering the wide aspect the Internet applies to.
No it's not. He's talking about lowest common denominator. You don't design sites to be unviewable by anyone which means accommodating screen resolutions down to as low as 800 x 600.

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

kongknabe
Offline
Regular
Last seen: 14 years 37 weeks ago
Joined: 2005-11-23
Posts: 33
Points: 0

FIXED CONTAINER DIV

Tyssen wrote:

No it's not. He's talking about lowest common denominator. You don't design sites to be unviewable by anyone which means accommodating screen resolutions down to as low as 800 x 600.

Why not ?

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 6 hours 23 min ago
Dallas
Timezone: GMT-5
Joined: 2004-06-25
Posts: 9761
Points: 3843

FIXED CONTAINER DIV

You don't design pages based on screen resolution. You design to enhance the visitor experience. Since it is a truism that horizontal scrolling to use a site is counter to a good experience, it is good design practice to accommodate all reasonable UA window sizes.

Now, since experienced users, especially, tend not to run applications maximized, we ask ourselves, "what is a good lower limit to design to?" The answer to that, gained by experience is 800×600. That works out well, since as my previous post mentioned, that's a comfortable maximum width for the human eye at normal viewing distance. For reading, a two column design with one column of about 500px is a comfortable width, according to many studies.

You may go wider by designing a fluid or elastic page. The real problem is with large monitors and users without the good sense to open their browsers at a sane size. Modern browsers accept a min- or max-width or height. IE is not a modern browser.

kongknabe wrote:
I bet that you wouldn't use an application like Photoshop in 800x600 if your actual screen size were 1024x768.

Well, I use the GIMP, but I just switched to that desktop and looked at the last image I worked on. The screen rez is 1024×768 and the image windows are a bit over 500px wide by about 250px high. The tool window is about half that, and not really needed. I also have an xterm window open on the desktop. I see no sane reason for any app to use up more of my limited desktop real-estate than necessary.

Besides the GIMP, I also use pdf readers, word processors, spreadsheets, xterm windows and browsers at less than maximized size.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 5 years 42 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

FIXED CONTAINER DIV

kongknabe wrote:
Tyssen wrote:

No it's not. He's talking about lowest common denominator. You don't design sites to be unviewable by anyone which means accommodating screen resolutions down to as low as 800 x 600.

Why not ?
Why not? Why not what? If it's: Why not design sites to be unviewable by anyone?, I'm surprised that anyone needs to ask that question.
But in case it's not obvious, you (or rather web design professionals) design sites to be as accessible to the greatest number of users as possible. That means accommodating as many screen resolutions, text sizes, browsers & operating systems as possible.
If you design sites at a fixed width larger than what a large proportion of the public are using, thereby causing a horizontal scrollbar in their browser and reducing their experience, then you are doing a bad job.

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

Anonymous
Anonymous's picture
Guru

FIXED CONTAINER DIV

dio5 wrote:
If you don't like it, don't look at it.
Done.

dio5
Offline
newbie
Last seen: 14 years 41 weeks ago
Joined: 2005-10-25
Posts: 10
Points: 0

FIXED CONTAINER DIV

I don't want to interrupt here, but when I 'm surfing and see something that would interest me, I always maximize my browser, and I really don't understand why anyone would expect a maximum experience without a maximum browser size... for me that seems very logical... but this discussion can be eternal I guess (until everyone has the same browser at the same resolution...) and it all depends on your target audience and wishes I guess...

have a nice day...

ratbastard
Offline
newbie
seattle
Last seen: 12 years 11 weeks ago
seattle
Timezone: GMT-8
Joined: 2008-05-20
Posts: 1
Points: 0

position: fixed

In my quest to find an IE workaround for this attribute i get to skim a battle of window maximization preferences?

i will say i am starting to move up from the 800X600 rule, but very slowly and i always advise clients against it when they request a full screen layout.

but my fixed div tag is still not working in IE. i will keep looking for a solution.

if someone wanted to post a suggestion here it may help the next searcher Smile

Ed Seedhouse
Ed Seedhouse's picture
Offline
Guru
Victoria British Columbia
Last seen: 32 weeks 5 days ago
Victoria British Columbia
Timezone: GMT-8
Joined: 2005-12-14
Posts: 3570
Points: 675

dio5 wrote:I don't want to

dio5 wrote:
I don't want to interrupt here, but when I 'm surfing and see something that would interest me, I always maximize my browser, and I really don't understand why anyone would expect a maximum experience without a maximum browser size

But your visitors, might I point out, are not you? Strangely they have their own tastes and preferences. And these can and have been studied and, in general, they are not the same as yours.

If you are writing a web site designed to be viewed solely by you, fine (though why would you put it on the web?). But if you want other folks to view and use it, why would you not be taking their preferences into consideration?

Ed Seedhouse

Posting Guidelines

Watch out! I am carrying irony, sarcasm and satire, and know how to use them.

wnajmy
Offline
newbie
Orlando, FL
Last seen: 11 years 26 weeks ago
Orlando, FL
Joined: 2008-10-26
Posts: 1
Points: 0

I might have figured it out or I might just be stupid

This is the top the code for my page.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.najmydeisgn.com">
<head>
<title>najmyDesign</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link href="style.css" rel="stylesheet" type="text/css" media="screen, print" />
</head>
<body>

I generally write it on a Mac, and the {position: fixed;} works well in Safari, but i didn't realize until reading this that it didn't in IE. I have another computer with Windows on it and i used it to test this, so it worked on the IE on that computer.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.najmydeisgn.com">
<head>
<title>najmyDesign</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link href="style.css" rel="stylesheet" type="text/css" media="screen, print" />
<span style="font-weight:bold">add text here</span>
</head>
<body>

Basically I found that if I add some character, any character it works to keep my top navigation fixed in IE.
Now I don't know if this will work every where, but it works on my computers.

You can see if it works for you, here: http://www.najmydesign.com/test

if it works for real and i'm not just missing something email me at

, i just created the account on this forum for this post and might not check it again for a long time.