Question

I just need help making an element fit the remaining space of a div, that is covered by a fixed position element.
Over-simplifying: I have a left-fixed menu and it has 25% of total width BUT a limit: max-width: 350px and min-width: 280px.
I also have a center aligned div that has 80% of width.
I want to put content in the second div, between the point where the divs touch, and the left margin.
I already tryed to put a spacing div between the div start and the menu end, (to the content take the rest of the space), but i reached the conclusion that it is imposible to make those calculations with css due to the min and max widths. (If i change the screen res. the width may change OR NOT).

How can i fix this?
Its javascript a good idea?

Answer 1

I think either this fiddle or this fiddle may get you what you want. In either case, I used a pseudo-element to generate a float to space it.

#container:before {
    content: '';
    display: block;
    float:left;
    margin-left: -12.5%; /* push float to left edge based on 80% container width */
    width: 31.25%; /* make float 25% of total width based off its 80% container */    
    max-width: 350px;
    min-width: 280px;
    height:100%; /* or 90% in first fiddle */
}

The second fiddle also has overflow: hidden set on the #content if you want it kept right always. Both also require a height: 100% set on the body and html tag.