2 replies [Last post]
opilo
opilo's picture
Offline
newbie
so Dutch!
Last seen: 12 years 25 weeks ago
so Dutch!
Joined: 2007-01-20
Posts: 2
Points: 0

I hope someone has a solution because right now I am completely lost...
I came up with a nice lay-out for my personal website, but is seems impossible to do with CSS.

this is kind of what I have in mind:

the basics consist of a flexible wrapper with a min and a max width (I conveniently ignore IE6 for now). The left-side div is the content-area and has a flexible width. The center and right div are both float:right and have a fixed width. So far so good, but this is where the problems begin:

I would like to have the center-div to have a fixed height of 100% of the viewport. However, because it is floated the height: 100% is not the height of the screen but the height that is available inside the floated area.

Problem no.2 is the image: I want the image to be fixed to its spot, no-repeat and so on. Background-attachment:fixes fixes the background, but to the viewport and not to the div it is in. So as soon as I set it to fixed it disppears. Guess how many extremely frustrating hours I spend before I remebered that...

I even tried to get this lay-out to work with tables (I was getting desperate) but even then both the height and the fixed won't work. The height because of the flex-width wrapper (which does not want to have height:100% either, even with body height at 100%), and the fixed because of what I mentioned earlier. To be honoust I do not want the wrapper to have a fixed width because I want the scrollbar to work as it would normally do.

my HTML:

(div id="right")
   navigation
(/div)

(div id="center")center, this is the problem-area! (/div)

(div id="left")
Main content area, here I am going to out all the stuff that matters, or that doen't matter
(/div)

(/div)

my CSS

#wrapper         {
   min-width: 700px;
   max-width: 1200px;
   margin: auto;
   text-align: left;
   background-color: #FF9900; // orange
}

#left            {
   margin-right: 280px;
   padding: 10px;
   background-color: #99FF99; // green
}

#center            {
   float: right;
   width: 120px;
   height: 1000px;
   background: #000000 url(img/dionahoofd.png) no-repeat;
}

#right            {
   float: right;
   width:150px;
   padding: 5px;
   background-color: #FFFF66; // yellow
}

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

Quote:Background-attachment:f

Quote:
Background-attachment:fixes fixes the background, but to the viewport and not to the div it is in.

I don't get this bit. There's nothing else in that element is there? And I don't understand if it's fixed to the spot, wouldn't that be of the viewport anyway?

If the element with the image just contains an image, it seems to me the best way would be to attach it to the body (which IE6 will understand) and then position your other columns around it.

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

opilo
opilo's picture
Offline
newbie
so Dutch!
Last seen: 12 years 25 weeks ago
so Dutch!
Joined: 2007-01-20
Posts: 2
Points: 0

true, but the wrapper-div

true, but the wrapper-div has a flexible width, depending on the screen-resolution, so fixing the position of the background-image to the screen/viewport means it is going to shift position according to the resolution. The max-width of 1200px gives funny results if the screen is bigger, such as a widescreen. The image then ends up over (or underneath) the right-side div. When delaling woth smaller screens the image will end up on top of the content (or under it).

I fear I am not going to get this fixed with clean CSS, so I think I am going to drop the wrapper and forget about the max-width (eventhough I think those extremely long lines of text on a widescreen are rather unreadable) and settle for fixing the center with absolute positioning. For now, that is...