Help with positioning - CSS forum at WebmasterWorld - WebmasterWorld

Forum Moderators: not2easy

Message Too Old, No Replies

Help with positioning

everettj1

6:06 am on Dec 25, 2007 (gmt 0)

10+ Year Member

Hello, I have a web page which works fine in all browsers I have tested except the sidebar verbiage I have positioned using CSS on the right of the page moves when the browser is resized. It is positioned absolute using top and left in px.

I noticed that if I use percent it moves with the page to the left but as px it moves away from the page to the right. I would like for it to stay in its place and disappear as the browser is resized just as the rest of the page does.

I tried nesting divs but that didn't work for me, maybe because I was guessing at a solution.

an example of what I am talking about is:

[header]
[content]--------[sidebar] ---> moves this way when browser resized <-- this way or ---> that way
.
.
.
.
.
[footer]

So if someone resizes the browser to from the right side moving it to the left my sidebar moves off the page to the right. The same is for if the user moves the browser from left side to right, making the browser smaller.

So my question is what can I do to position this sidebar so that when the browser is resized it will stay in the same place?

thanks

Xapti

9:41 am on Dec 26, 2007 (gmt 0)

WebmasterWorld Senior Member

10+ Year Member

Heh, what I think you're really asking for is for your sidebar not to move at all! You see if you shrink the window horizontally (it's completely irrelevant which side you do it from), items would normally try to fit into the window, thereby moving to fit (floated items have this behaviour). To have it stay put, all you need is a fixed width container.
So like after your body element, just put in a div, and specify it's size. You do not need absolute positioning for your current usage, so it would not be a good idea (unless there's additional requirements I don't know of) to use it, since it doesn't take up flow. A float to the right would be fine with a fixed with.

<body>
<div id="mainpage">
<div class="navigation">
</div></div>
</body>

#mainpage{width:950px}
.navigation{width:something;float:right}

Perhaps the main issue is that you did not realize that you MUST specify a width to get the kind of effect you want. It needs to have a basis point to look at from when the browser is resized. Perhaps it's not very obvious, but it's extremely important to realize. Also absolute positioning does have it's uses, but most of the time it's unnecessary and messy and possibly difficult to be using them.

everettj1

6:59 pm on Dec 26, 2007 (gmt 0)

10+ Year Member

Well, what I did was kind of a cheat. I have a "sidebar" in flow but the verbiage that goes inside that sidebar is positioned using absolute positioning.

So, my question is this. Will I need to absolutely position the wrapper div to make this work?

I noticed when I wrapped my div in another div and positioned the wrapper in the same place as the original div, it still moved with the page as it was being resized. Oh, perhaps if I set the width of the div to be as wide as the remaining page as it would be going to the left from the right side then that would force it to stay in place! Is that what you mean?

I'll try your solution and post back my results. Thank you very much!

James

everettj1

9:20 pm on Dec 26, 2007 (gmt 0)

10+ Year Member

You are a genius my friend, what you told me to do was spot on. I had to tweak the solution a bit to make it work for me. I wrapped the entire page and placed another div inside that which also wrapped the entire body content. Then I set the width of both to the exact same size and everything stays in place both vertically and horizontally; in both IE7 and Firefox too!

This thread is solved for me, so thanks a lot for the help!

Regards,

James