CODEWITHSUNDEEP
htmlcssfluid-layoutliquid-layout
tftd
tftd

Reputation: 17032

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?

Upvotes: 3

Views: 410

Answers (2)

user1289347
user1289347

Reputation: 2407

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

Upvotes: 4

Shailender Arora
Shailender Arora

Reputation: 7778

You can achieve your result through a simple CSS with defining positions in #content & #right for better understanding please see the simple code:- 

    <!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
<!--[if IE]>
  <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<style>
{
            padding: 0;
            margin: 0px;
            color: white;
        }
        html, body {
            height: 100%;
            width: 100%;
        }


        #header {
            background: black;
            height: 100px;
        }

        #content {
           width:100%;
           border:5px solid red;
           overflow:hidden;
           position:relative;

        }

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

        #right {
            background: #4aa016;
            height: 100%;
            float: left;
            width:100%;
            position:absolute;
            margin-left:130px;
        }

</style>
</head>
<body>
<div id="header">
    My Header
</div>

<div id="content">
    <div id="left">Left container</div>
    <div id="right">Right container</div>
</div>

</body>
</html>

see the demo:- http://jsbin.com/ajasey/17/edit

Upvotes: 0

Related Questions