Help with DIVs

[hooloovoo24]

Hi. I was trying to create a layout with fixed DIVs like the one they show here: http://www.w3.org/TR/CSS21/visuren.html#fixed-positioning

But the thing I want to add is an extra DIV on the right hand side of the screen identical to the one on the left. How would I do that? When I try it, the extra DIV ends up on the left side! Here's what I've got so far:

#sidebar {
background-color: #7577a0;
border-right: 0.5em solid #483d8b;
position: fixed;
top: 20%;
left: 0;
right: auto;
width: 10em;
height: auto;
visibility: visible;
display: block
}

#mid {
position: fixed;
top: 20%;
left: 10em;
right: 10em;
width: auto;
height: auto;
visibility: visible;
display: block
}

#linkbar {
position: fixed;
top: 20%;
left: auto;
right: 0;
width: 10em;
height: auto;
visibility: visible;
display: block
}

Where "sidebar" is the lefthand side, "mid" is the middle content, and "linkbar" is the right side. If anyone can help, I'd really appreciate it.

[Jona]

Can you post the HTML as well? Also, keep in mind that Internet Explorer treats "position:fixed" the same way as "position:absolute," so you'll probably want to use floats instead of absolute positioning for IE only.

[hooloovoo24]

do you mean the HTML for the entire page? Because it has a lot of stuff on it that doesn't really matter...

[Jona]

Originally posted by hooloovoo24
do you mean the HTML for the entire page? Because it has a lot of stuff on it that doesn't really matter...

Replace the content with dummy text or something - I just need to see the order of your code and what have you. I don't want to guess at your HTML, because that would be more work for me and it would take longer before you got the answer you're after (since the HTML might have to be changed, and then the CSS would have to be changed again).

[BonRouge]

To have a position:fixed element on the left, you need to change your code to something like this :#linkbar {
position: fixed;
top: 20%;
right: 0;
width: 10em;
height: auto;
visibility: visible;
display: block;
}

(basically, take out the 'left:auto' part).

As Jona said though, you might regret using position:fixed as it doesn't work in IE. If that's fine, then... OK.

I hope this helps (and I hope it's right - I haven't checked, but I'm pretty sure it's OK).

[Jona]

BonRouge, you may be incorrect. I haven't tested either, but the CSS2 spec (http://www.w3.org/TR/REC-CSS2/visuren.html#propdef-left) says the intial value of the "left" property is "auto," so even if it's not there, it's set to "auto." The auto value should fill in the remainder of the screen (which is not filled by the linkbar div).

[hooloovoo24]

OK I didn't realize that Fixed wouldn't work in IE so let's just scrap that idea altogether. Hows about you tell me what I should be doing to get what I want. Because basically, I'm lost and confused and want to curl up in a little ball. OK, so:

I have my layout set out with div's that act as layers...it is working ok right so long as the conditions are just the way I made it in, but when the screen resolution is different or the browser window changes size, everything gets all messed up. So I want this to stop happening. And have no clue how to do this!

[BonRouge]

Just to clear up what we were talking about... I tested what I said, and... I was right (http://bonrouge.com/test/linkbar.htm).

Now, Hooloovoo24 (I really wonder where some people get their names from), you want to know what you should be doing, but I don't know what you want to do! What you have works when (whatever) but what do you have? What kind of layout are you trying to get? If you want to have a regular three-column layout with a header and a footer, see what you think of this (http://bonrouge.com/3c-hf-fluid.php). If you're looking for something else... I don't know... tell us what it is.

[hooloovoo24]

That's exactly what I want...only no footer. :D

edit: PS if you want to know where my name comes from, try reading The Hitchhiker's Guide to the Galaxy...:)

[BonRouge]

OK. Will you be OK now then? If you use that layout, you'll need to remember to remove the div which makes space for the footer.
Let me know if you have any problems.

[hooloovoo24]

OK. Thank you so much again. I know I can be annoyingly ignorant sometimes, but I'm slowly learning things. This should work...let's keep our fingers crossed.

[hooloovoo24]

OK...do I need to have a background image for the left and right sides? Can't I just leave them...the background color?

[Jona]

Originally posted by BonRouge
Just to clear up what we were talking about... I tested what I said, and... I was right (http://bonrouge.com/test/linkbar.htm).

It works exactly the same if you add "left:auto," though. I suppose we were both right? :D

[hooloovoo24]

OK couple of other questions real quick...

when you go to a site like...

http://www.ci.issaquah.wa.us
or such, they have this cool header thing where the line swoops down onto the side bar. I want to do something like that...only since you've got two separate images involved, you have to make them match up right? And since on your example, the left bar stays at 200px, when the header gets smaller, the lines won't meet up anymore. Any way to fix this?

The second question is that when I try to do this, the left bar stays completely to the left. Is there any way to make it come slightly out, just by a few pixels?

[baseiber]

It looks like that site does not allow it's header to resize.

[hooloovoo24]

so if I wanted to do something like them, I would have to do...a fixed width instead of fluid?

[Jona]

Originally posted by hooloovoo24
so if I wanted to do something like them, I would have to do...a fixed width instead of fluid?

It would be easier. Try reading about creating efficient CSS designs (http://www.vladdy.net/Demos/ElementSizing.html#pl) a little. I don't know if BonRouge is going to continue helping or not -- if he is, there's no point in me helping anymore, since I know he's capable of solving your problem. Additionally, it is his CSS that you are using, which would make him more familiar with it.

[hooloovoo24]

OK...I'm not quite sure I'm understanding this correctly, but I'll keep trying and hopefully Bonrouge will offer some insights...but if not...Jona, I'll come crying to you, so be warned! :) Thanks for your help. I'm about ready to leave for school, so I'll try working this again later...

[BonRouge]

Originally posted by Jona
It works exactly the same if you add "left:auto," though. I suppose we were both right? :D
I guess so. :)

hooloovoo24,

Sorry I've been away, but you know - gotta sleep some time.

It seems like you want to make a fixed-width page. On the page that I showed you, there's a link to the same kind of thing but fixed-width (here (http://bonrouge.com/3c-hf-fixed.php)).

That page uses one image for the body background and there's no problem with the header moving about causing mis-alignment. If you don't want to use one big image, you could cut it up and place it in the header and left divs. One of the main points about the pages I'm showing you was that the columns are 100%-height - they stretch to the bottom because they are in the background of the big #wrap div (people often have problems with 100%-height) but as you don't need that, it's actually easier.

I hope that makes it a little clearer. I will be back if you have any more questions.

[hooloovoo24]

Thanks, BonRouge. Actually, after I posted that question, I found the fixed width example, and have been working off of that ever since. (Well, I worked on it when I last worked...which was thursday...and now today. but still!) I will certainly let you know if I have any problems. Thanks again,

Mel

[hooloovoo24]

OK I am having a slight problem. Two really. OK three...four...many, but only two that have to do with this.

First of all, I can't get the page to center in IE. It works in other browsers (well, at least Mozilla, which is the only other browser I have...), but stays stuck to the left side of the page in IE. Any help with that? What part of the CSS helps that?

Secondly, I have a slight problem with the background image. It doesn't go all the way up. I put


#wrap { background-image:url(graphics/side-bar.jpg);
background-position: top left;
background-repeat:repeat-y;
min-height: 100%;
width:780px;
margin:auto;
}

but there is a small gap between my header image and my left sidebar image. Am I doing something wrong? Please let me know if you need more information to help!

[BonRouge]

Do you have an old IE? I think it should work fine in IE6. I think IE5/5.5 might have a strange issue here. If you add body {
text-align:center;
}
#wrap {
text-align:left;
} it might help... (though I'm not sure).
What would help is if you posted a link to what you have so far...

[hooloovoo24]

Good News: Yeah, that works!

Bad News: I can't put anything online until I get it figured out. Just the way it has to be, sadly. So I can't point you to a link.

More Bad News: Do you know how to fix the little gap problem?

Slightly Better News: If you want, I can post a .txt of my source code for you to look at, and maybe that would help?

[BonRouge]

No, I'd like to see the thing live - with your images. I don't really know if I can fix the problem without seeing it. It takes two minutes to upload a webpage - just give it a test name and upload it. It's difficult for me to help you if you don't.

[hooloovoo24]

OK:

I really want to help you because I need you to help me. See, I'm working for my city hall (Poulsbo, WA) and I can't upload it to their site until I'm done. So do you know a good free host I can use to just set up an account to test with?

[BonRouge]

I don't know about 'good' but here (http://www.onestop.net/)'s a free one.

[hooloovoo24]

thanks. I'll try to get everything set up by tommorrow, and I'll let you know. Thanks so much for helping me with this!

[BonRouge]

To make it easier, I've set something up on my server. I'll send you the details.

[hooloovoo24]

OK I just figured something out. For some reason, it was putting a little border around my image, even though I didn't tell it to. So I fixed that, and now there is no gap.