Home/ Questions/Q 9031983
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-16T07:52:10+00:00

I’m trying to make a simple, fluid, responsive two column layout (just for the

  • 0

I’m trying to make a simple, fluid, responsive two column layout (just for the sake of learning CSS), consisting of a sidebar and a main section.

I was able to create the sidebar with 100% height, position the main content at its side, but when I put a H1 inside my main section… tada! Its margin created a margin for the sidebar as well.

Here’s a minimum code that presents the problem:

<!DOCTYPE html>
<html>
  <head>
    <style>
      html,body {
        margin:0;
        padding:0;
        width:100%;
        height:100%;
      }

      #sidebar {
        display:block;
        position:absolute;
        width:25%;
        min-height:100%;
        border-right:1px solid #222;
        background-color: #E0E0E0;
      }

      #main {
        margin-left:25%;
        display:block;
      }

      h1 {
        padding:2%;
        /* margin:0; */
        /* defining the margin as zero aligns 
         * everything at the top */
      }
    </style>
  </head>

  <body>
    <header id="sidebar">
      Let's reach for the stars!
    </header>

    <section id="main">
      <h1>Nope!</h1>
    </section>

  </body>
</html>

I’ve tested it in Chrome and Firefox, happened in both.

I’ve created this JSFiddle, and thanks to a comment from cimmanon, the behavior is the same.

Well, I’m lost. Am I missing something really simple?

Is this approach a good way to make a two column layout? I inspired myself reading the CSS from the Svbtle blogs.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Generally speaking, absolute positioning should be avoided unless you really do want the element removed from the document’s flow. If you have a page where #main ends up having shorter content than #sidebar and the user’s display isn’t tall enough to display all of #sidebar‘s contents, you’re going to have your content clipped off.

    My favored way of achieving equal height columns is to use the display: table CSS properties.

    http://jsfiddle.net/PmkCQ/3/

    html,body {
        margin:0;
        padding:0;
        width:100%;
        height:100%;
      }

body { display: table }

      #sidebar {
        width:25%;
        border-right:1px solid #222;
        background-color: #E0E0E0;
      }

      #sidebar, #main {
        display:table-cell;
        vertical-align: top; /* optional */
      }

      h1 {
        padding:2%;
        margin-top: 0;
        /* margin:0; */
        /* defining the margin as zero aligns 
         * everything at the top */
      }

    There’s other ways, of course, but this one is less brittle than floats or absolute positioning. The only down side is that IE7 doesn’t support these properties, so they’ll continue using the element’s previously defined (or default) display setting (for div, it will be block).

    • 0