Width of div

[kurt.santo]

Why does the width of a div inside another div shrink when you apply "position:fixed"? Have a container div and all other divs should inherit a width of 70% (which works when you do not use fixed)...Kurt

[Ingolme]

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.

[jlhaslip]

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>

[Ingolme]

But when the position is set to fixed, I think the div doesn't inherit anything from its container.

[kurt.santo]

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

[Ingolme]

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>

[kurt.santo]

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

[Ingolme]

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.

[kurt.santo]

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