Controlling height when scaling window

Question

I'm working on a webpage, where I'm getting stuck right now.

If you take a look at this JSFiddle you will probably get the idea of how my design works. I have a div table, and on top of that I have another table as overlay, creating the effect of the div floating above the rest. This is done with absolute position, and as such works as intended. But, I always want to have it beautiful when scaling to smaller screens, and my minimum is 640px, which I try to make every webpage I make, work on.

But, if you now take a look at my JSFiddle, you should pretty much see how it should look like when as intended. Besides missing some fonts, colors etc. Buy besides that, as intended. Now, if you try to change the .content div to:

.content {
     max-width:640px;
}

Instead of the 960px it is now, this should make the box smaller, as it would if you had a smaller screen, or scaled your window. But, as you see, the absolute position overlay do not extent with the rest, and is left a bit short.

I've tried multiple things with max-height, min-height etc., but nothing really worked. So I was hoping someone could give me a hint of some sort to how I could create this, with the div overlay scaling with the rest.

Hope you understand what I mean :)

Thanks in advance.

Answer 1

The problem is that the word in your overlay 'hjemmeside' is too long, and causing the div to overflow. You can add html { word-break:break-all; } to fix this issue. See demo here.