Question

I got the following problem.

I have a design similar to this jsfiddle:

http://jsfiddle.net/k3EUx/

I’d like the div endless to continue endless to the right, just like if you are using width 100%. The problem is that there is supposed to be a logo on the left side of it, so I can’t use that attribute. Is there any way to do this without just making a really wide div and place it using position absolute?

I need this because the website itself is 1008px wide, but the menu is just continuing to the right, so if you have a big screen (say 1080) this will be expanded automatically.

(I assume you have to place the div outside the wrapper, but I have no idea where to begin to make this work)

Answer 1

WHat you are looking for is a liquid/fixed layout (you can google these terms if you want some extra examples).

You can try this kind of CSS:

#header
{
    height: 50px;
    background-color: #666;
    margin-bottom: 10px;
}

#nav
{
    float: left;
    width: 180px;
    height: 150px;
    background-color: #999;
    margin-bottom: 10px;
}

#content
{
    margin: 0 30px 10px 210px;
    height: 150px;
    background-color: #999;
}

#footer
{
    clear: both;
    height: 50px;
    background-color: #666;
    margin-bottom: 10px;
}

Found here