Jump to content

Width of div


Recommended Posts

But position:fixed, means that the position coordintes are relative to the window and not the parent. Why do you need a div with a fixed position if it's inside another one?Maybe you can give an example of what you want your page to be like.

Link to post
Share on other sites

The inside div is measured according to the containing block.In the first example, the containing block is the display width.In the second example, the containing block is the outer div, so the inner div is a percentage of that div, and the third example is a set of nested div's as a percent to show the effect to extremes.

<!-- C:\Documents and Settings\Jim Haslip\Desktop\div_check_width.html --><!-- sample of a contained div/ div in a div/ with width as percent --><p>1 div at 75% width</p><div style="width:75%; background-color: red; ">1 div at 75% width</div><!-- Second sample of a contained div with width as percent --><p>2nd div inside using 75% width</p><div style="width:75%; background-color: red; "><div style="width:75%; background-color: green; ">2nd div inside using 75% width</div></div><!-- a bunch of nested div's using percents--><p> a bunch of nested div's using percentage widths </p><div style="width:80%; background-color: red; "> <div style="width:80%; background-color: green; "> <div style="width:80%; background-color: blue; "> <div style="width:80%; background-color: purple; "> <div style="width:80%; background-color: red; "> <div style="width:80%; background-color: black; "> <div style="width:80%; background-color: orange; "> <div style="width:80%; background-color: red; "> <div style="width:80%; background-color: green; "> <div style="width:80%; background-color: red; "> <div style="width:80%; background-color: brown; "> <div style="width:80%; background-color: red; "> <div style="width:80%; background-color: blue; "> </div></div></div></div></div></div></div></div></div></div></div></div></div>

Link to post
Share on other sites
But when the position is set to fixed, I think the div doesn't inherit anything from its container.
But how do you fix certain divs in a container, especially the ones that should fill the width of the container? In my example I have a left sidebar and a top nav bar, which should stay in place where the rest should go up and down as such...Kurt
Link to post
Share on other sites

If you want to "fix" the div's position and size relative to its container you can do this:

<div style="position: relative; width: 70%;"><!-- container -->Some content<div style="position: absolute; bottom: 0px;"><!-- this div is set to always be on the bottom of its container, not of the full page -->Something else</div></div>

Link to post
Share on other sites
If you want to "fix" the div's position and size relative to its container you can do this:
<div style="position: relative; width: 70%;"><!-- container -->Some content<div style="position: absolute; bottom: 0px;"><!-- this div is set to always be on the bottom of its container, not of the full page -->Something else</div></div>

Thanks for your input. Strangely the second div sits on top of last row of text of parent container. Why is that? Also, what I was after was to fix it so it won't move when you scroll...Kurt
Link to post
Share on other sites

You can give it a fixed position, but it wil be fixed in comparison to the page, and it won't inherit values from its container. You'll have to give it its own width.I'm not sure exactly what you're trying to achieve, there may be other ways to work around it. Maybe you can post a diagram or something to show what you mean.

Link to post
Share on other sites
You can give it a fixed position, but it wil be fixed in comparison to the page, and it won't inherit values from its container. You'll have to give it its own width.I'm not sure exactly what you're trying to achieve, there may be other ways to work around it. Maybe you can post a diagram or something to show what you mean.
Just found a solution. I use a set height on an inside container and use scroll: auto. So my container is always visible (and most importantly the logo at the top) as only the text container scrolls...Cheers!Kurt
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.

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...