I’m needing to put a div at a specific location inside of another div. Basically, I want to “absolutely” position it, inside the div. Absolute positioning will cause it to go from the site’s edges though. Relative position will work IF the browser is big enough and isn’t restored down. If the site is scaled down small enough, then it “appears” to be absolute positioned as it will move position on screen as the window size changes. Is there a way to force it to stay in a set position inside of a div?
edit: I just read that if you set your parent div to relative you can use absolute on the child. I did this, it worked, though it still has the same issue of not sticking still.
edit: This is working correctly, I might have to revisit my method for laying this out. ;( Which I’m not really sure how I will do this, but I’ll figure it out.
You dont need to use absolute, or relative positioning in order to place things where you want them. Try using floats, margins, or any combination of the two. I wouldnt use absolute positioning untll you fully understand it. Dont forget to validate!!
My problem is that I’m laying out a design that is wider than some browsers will see. It isn’t a problem to cut the sides off, which is why I’ve got a middle point on all of it. Wanting to center the site and I do most of it in a under-layer background. Isn’t much to the css yet, so it’s easy to see what I’m doing. This way on a smaller browser it can cut off some of the edges without forcing scroll bars both ways. Seems this is part of what is causing my problem. Is there a way around what I am talking about?
yeah, if you do as i suggested above, and apply the background images to the html and body tags, you shouldnt have scrollbars. Just do it without absolute positioning.
I don’t have a doctype atm, that is honestly causing this problem? Nothing on that page of “errors” should be causing a throw off on this. I need to look at a solution to what I’m doing.
dude, i already told you twice what you need to do. reconstruct the page without absolute positioning, apply the background images to body and html tags. You always want valid code. CSS works when the code is good.
Apparently, CupidsToejam, I’m a complete dumbass and can’t see what you are talking about, or don’t quite know what it is you’re talking about. Maybe I just don’t understand the way you’re wording it. Or maybe its the rude way you just came off to me. Anyway, at this moment I am stuck. I didn’t say css didn’t work. Setting a parent div to relative allows you to absolutely position a child. (I’ve removed it for now) Though, it is true. I don’t know how I will be able to make it work on different sized browsers and when someone scales it down due to restore.
I will play with the html/body tags and see what I can do though.
I’ve switched over to using html/body tags for the backgrounds, though that helped absolutely none. I’ll think on this some, if anyone has anything to throw in that would be nice. If not, I’ll probably make a more specific thread later, one that isn’t ruined with 10 posts of nothing. Thanks
It’s not quite clear what you want to position where. Please clarify that.
It’s quite normal to nest divs within divs. Abs pos is generally a last resort. It’s also easy to style elements so that they contract on narrow browsers.
Okay, did this quick mockup to help explain. The shaded area in the middle is the main content area, needs to always be on the screen no matter what resolution. The sides of this area can be considered a treat if you will, if your resolution is basically bigger than 800x600 you’ll see more and more of that area. Which means when you are on a smaller resolution or the screen is resized down smaller, the left side of the shaded area should be the left side of the page. Everything inside of that area needs to retain its position no matter what resolution/resizing though. Right now the css I have:
Since I was told to take the absolute/relative positioning out of the code, the main-nav sits right under the top div now. So right now I’m using a background image for the sides+shaded area basically, the repeating background is all in the shaded area and extends on obviously as long as needed. I hope this clears up what I am trying to accomplish a little more. Any questions that need to be asked, please feel free to do so. Thanks a lot.
edit: Just as a note, everything on the page is working correctly except for the fact that I can’t really position that main-nav without it being awkward. Can’t position it to where it is at on my mockup here and have it stuck in that position if that makes sense.
I think the problem might be in the background images. I’m not 100% sure what is up, you can look the code is up. You can see when you shrink the browser and scroll to the right, the nav bar is shifted out far to the right. Though, when it is scaled down, the left of the black area should be to the edge of the screen at all times. I think my bgs are the issue. They seem right in a full size browser though, messed up in 800x600 resolution.
Now, with the code you mentioned ralph, it is moving my main-container down 40px instead of the main-nav, but it moves the main-nav to the right and not main-container…
Question: I just went back to my older method of using relative/absolute. It is working perfectly this way, is this bad? Is there a more correct and/or better way to do this?