Home/ Questions/Q 670395
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-14T00:15:27+00:00

I believe this is a beginner’s CSS question. I am utilizing the method described

  • 0

I believe this is a beginner’s CSS question. I am utilizing the method described in http://www.xs4all.nl/~peterned/examples/csslayout1.html to fix a header to the top and a footer to the bottom.

What I’d like to achieve now is two columns inside the content div. A left one of 200px and a right one that takes up the rest of the width.

Unfortunately, I can’t get the left and right divs to display correctly: they just don’t grow vertically, and if I make the right div “width: 100%” it positions itself underneath the left one.

What is the trick to make the left and right div take up all the space within the content div?

The layout1.css is the original one. I just added two entries: #left and #right

layout1.css:

/**
 * 100% height layout with header and footer
 * ----------------------------------------------
 * Feel free to copy/use/change/improve
 */
html,body {
    margin: 0;
    padding: 0;
    height: 100%; /* needed for container min-height */
    background: gray;
    font-family: arial, sans-serif;
    font-size: small;
    color: #666;
}

h1 {
    font: 1.5em georgia, serif;
    margin: 0.5em 0;
}

h2 {
    font: 1.25em georgia, serif;
    margin: 0 0 0.5em;
}

h1,h2,a {
    color: orange;
}

p {
    line-height: 1.5;
    margin: 0 0 1em;
}

div#container {
    position: relative; /* needed for footer positioning*/
    margin: 0 auto; /* center, not in IE5 */
    width: 750px;
    background: #f0f0f0;
    height: auto !important; /* real browsers */
    height: 100%; /* IE6: treaded as min-height*/
    min-height: 100%; /* real browsers */
}

div#header {
    padding: 1em;
    background: #ddd url("../csslayout.gif") 98% 10px no-repeat;
    border-bottom: 6px double gray;
}

div#header p {
    font-style: italic;
    font-size: 1.1em;
    margin: 0;
}

div#content {
    padding: 1em 1em 5em; /* bottom padding for footer */
}

div#content p {
    text-align: justify;
    padding: 0 1em;
}

div#footer {
    position: absolute;
    width: 100%;
    bottom: 0; /* stick to bottom */
    background: #ddd;
    border-top: 6px double gray;
}

div#footer p {
    padding: 1em;
    margin: 0;
}

// added the following:

div#left {
   border: 1px solid red;
   width: 200px;
   float: left;
   min-height: 100%;
   height: 100%;
   padding-left: 10px;
   margin-right: 10px;
}

div#right {
   border: 1px solid blue;
   float: left;
   min-height: 100%;
   height: 100%;
   padding-left: 10px;
   margin-right: 10px;
}

layout.html:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>CSS Layout - 100% height</title>
    <link rel="stylesheet" type="text/css" href="layout1.css" />
</head>
<body>

    <div id="container">

        <div id="header">
            <h1>header</h1> 
        </div>

        <div id="content">
                   <div id="left">
                       left column
                   </div>
                   <div id="right">
                       right column
                   </div>
        </div>

        <div id="footer">
            <p>
                footer
            </p>
        </div>
    </div>
</body>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    The way I usually do it is by using the float and padding properties.

    HTML:

    <div id="leftCol">
   content
</div>
<div id = "rightCol">
   content
</div>

    CSS:

    #leftCol {
    width: 200px;
}

#rightCol {
    width: 100%;
    float: right;
    padding-left: 200px;
}

    Should work.

    So you are using float, and padding to put the div’s side by side.

    You might need:

    position: absolute;
top: 0px;
right: 0px;

    in your #rightCol CSS style (Not tested btw… from memory)

    • 0