Position fixed element with percentage width relative to container

Question

I know that position: fixed makes an element relative to the viewport instead of it's offsetParent however I have an issue where I have a side element which takes x amount of space and then some fixed position heading elements which I want to take up a percentage of the remaining viewport width.

See fiddle: http://jsfiddle.net/U5DSZ/

Now I could put all the h1 element's into their own container but then they lose their semantic meaning as they are no longer associated with their content.

I understand JavaScript could do this but I am against using JavaScript for page structure.

Is there a way to do this in a purely HTML or CSS way? I don't mind moving the h1 element's as long as they retain their relationship with the content and the content remains statically positioned.

Answer 1

You can get the effect that you want as follows.

Your HTML snippet is good as is:

<div id="content">
    <section>
        <h1>Heading 1</h1>
        <p>...</p>
    </section>
    <section>
        <h1>Heading 2</h1>
        <p>...</p>
    </section>
</div>

and the CSS is good but just requires some explanation:

#content {
    overflow: visible; /* default, but important to notice */
}

section {
    float: left;
    width: 25%;
}

h1 {
    position: fixed;
    width: 25%;
    background: #00FF00;
    text-align: center;
}

and the demo fiddle: http://jsfiddle.net/audetwebdesign/4zLMq/

How This Works

Your #content block takes up the remaining width to the right of your 200px left floated sidebar.

Within #content, you have two left-floated section elements that take up 25% of the parent container, which in this case, is the width of the view port panel.

Your child h1 elements have position: fixed, which means that their width of 25% is also computed based on the width of the viewport (not #content).

Case 1
If you want h1 and #content to have the same width, they need to have the same relative (25%) computed from the same containing block (view port in this case).

However, the value of 25% is not 25% of the remaining space after you account for the floated sidebar. However, maybe you can live with this.

Case 2
You could make the width values a bit easier to determine if you set the sidebar width to be a relative value. Using mixed units is always an issue.

Answer 2

tldr; Shorter and cleaner solution:

h1 {
    width: inherit;
    ...

---

I stumbled upon this question, with a similar issue : my container's size can be user defined through resize:both (and moveable too!).

If I followed the accepted solution, it implied I had to apply the same props to my fixed header inside my container (top, left, width and height…).

Instead, inheriting the width from the parent container works properly. I found this way much simpler, and it makes more sense too, tested on major browsers and mobiles (demo).