Jump to content
Stef's Coding Community
williamrouse

Fixed location of a div within a div

Recommended Posts

This might be a follow up to the last question that Eric helped with, but I am not sure.

 

How do you fix the absolute location of a div within a containing div?

Here are the div listing from outer to inner.

In my case I have wrapper which is the outer limit of all my content. Then I have branding which is flush to the top and stretches across the container. Next comes content whose top is branding and bottom is container. I then have a left content and a right content which snugly fits into the container. I now want to place a menu div at the top of left content that does not move when the browser is stretched or shrinks. Does that make sense?

Can you give me some guidance to resolve this?

WBR

Share this post


Link to post
Share on other sites

How do you fix the absolute location of a div within a containing div?

 

There are always lots of ways to do the same thing. I would put position: relative; in the #wrapper div then use position: absolute; for the inner div.

 

Position: absolute elements normally take their position from the top left corner of the viewing window but if inside an element with position: relative they take their position from the top left corner of the element like a div. This means that if the position: relative div centers in different viewport resolutions, where it may sometimes be away from the left side of the window, sometimes tight to the left side, the inner position: absolute div will move with it, retaining the position within the position: relative div.

 

Text

Edited by Wickham

Share this post


Link to post
Share on other sites

Wickham:

Let me reiterate what I understand from your reply.

For the outer container I specify position relative. Then for each inner container I specify position absolute and give each a position with top and left and then set the size with height and width.

Is this correct

 

WBR

Share this post


Link to post
Share on other sites
What's the import or implication in your usage of the word "have"?

 

No disrespect intended, but is English your first language or second? So that I can better taylor my answers.

Share this post


Link to post
Share on other sites

I think Eric was just saying that I've offered an alternative that's probably confused you.

 

Divs that have no position stated or position: relative just follow the order in which they are coded, generally divs set themselves one below the other unless they have float: left or right. Fine-tuning of positions is done with margins and padding and can be position: relative top or left from where they would normally place themselves, so you can raise or lower them a bit or move them a bit side to side related to the previous div or element.

 

Position: absolute divs take no notice of the position of any other element, they have a top and left position and that's all they need, but as I said, if they are inside a position: relative element they take those fixed top and left positions from the top left corner of the container with position: relative.

Share this post


Link to post
Share on other sites

You guys have been really helpful. I appreciate getting educated. I started to make the changes and it looks like my formatting is getting better as I implement your suggestions. I need to reread your notes a couple more times as I change my code to understand it.

I have to take a break here. Its 44 degrees in MPLS, MN, that?s like 70 in Pasadena so I am going for a walk and work with this in the evening.

Thanks for your help to both of you.

WBR

Share this post


Link to post
Share on other sites

Good explanation Wickham. Yeah, there's nothing wrong with pos absolute (I use it all the time). You just need to completely understand "how" to use it, in order to understand it's implications.

Share this post


Link to post
Share on other sites

...they take those fixed top and left positions from the top left corner of the container with position: relative.

I got say it to believe/understand it:

A position absolute container in a position relative container takes the top left corner as 0, 0 or its point of origin. Wow, your note explains a lot to me.

Thanks again gentlemen.

WBR

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

×
×
  • Create New...