Search code examples
htmlcssfluid-layoutliquid-layout

CSS layout with fixed and liquid columns

I'm having a problem creating a layout that's partly liquid. The layout has to have 100% width and height but it shouldn't have scrollbars (overflow: hidden;).

enter image description here

On the image above shows what I'm trying to achieve. As you can see:

  1. The header has to be fixed - 110px with 100% width.
  2. Two divs wrapped via a container div. The blue one needs to be with fixed width 130px & 100% height, while the green one needs to be with liquid width and 100% height.

Here is my current code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <title></title>
    <style type="text/css">
        * {
            padding: 0;
            margin: 0px;
            color: white;
        }
        html, body {
            height: 100%;
            width: 100%;
        }

        .spacer {
            clear: both;
        }

        #header {
            background: black;
            width: 100%;
            height: 100px;
            float: left;
        }

        #content {
            height: 88%;
            width: 100%;
            padding: 0px;
            margin: 0px;
            position: relative;
        }

        #left {
            background: #1664a0;
            height: 100%;
            width: 100px;
            float: left;
        }

        #right {
            background: #4aa016;
            height: 100%;
            float: left;
            width: 91%;
        }

    </style>
</head>
<body>

<div id="header">
    My Header
</div>
<div class="spacer"></div>
<div id="content">
    <div id="left">Left container</div>
    <div id="right">Right container</div>
</div>

</body>
</html>

There are a couple of problems with this code:

  1. It doesn't work on various resolutions (800x600,1024x768, 1280x1024 and etc)
  2. The "content" div doesn't always fill the page to the end.
  3. The green div would go below the blue one if you resize the page to lower resolutions.

I guess I might be doing something TERRIBLY wrong here but I'm not a designer so is there somebody who could point me to "the right way" of solving this problem?

Solution

  • Take a look here http://jsfiddle.net/bmqPV/2/

    you have the left set to 100px and the right to 91%, so if 100px is greater than 9% it will go to the next line.

    EDIT, here is a new fiddle http://jsfiddle.net/bmqPV/4/

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <title></title>
    <style type="text/css">
        * {
            padding: 0;
            margin: 0px;
            color: white;
        }
        html, body {
            height: 100%;
            width: 100%;
        }

        .spacer {
            clear: both;
        }

        #header {
            background: black;
            width: 100%;
            height: 100px;
            position: absolute;
            top: 0px;
            left: 0px;
            z-index:3;
        }

        #content {
            height: 100%;
            width: 100%;
            padding: 0;
            margin: 0px;
            position: relative;
        }

        #left {
            background: #1664a0;
            height: 100%;
            width: 100px;
            float: left;
        }

        #right {
            background: #4aa016;
            height: 100%;
            width: 100%;
        }
        #wrapper
        {
            position: relative;
            height: 100%;
            width: 100%;}
        .contentcontainer {
            padding-top:100px;
        }
    </style>
</head>
<body>
<div id="wrapper">
    <div id="header">
        My Header
    </div>
    <div id="content">
        <div id="left">
            <div class="contentcontainer">Left container</div>
        </div>
        <div id="right">
            <div class="contentcontainer">Right container</div>
        </div>
    </div>
</div>
</body>
</html>​