Home/ Questions/Q 7819435
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-02T06:57:03+00:00

I’m having a problem creating a layout that’s partly liquid. The layout has to

  • 0

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 (800×600,1024×768, 1280×1024 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?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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>​
    • 0