Home/ Questions/Q 4054706
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-20T14:36:34+00:00

Two column layouts are quite common and until now I implement it as outlined

  • 0

Two column layouts are quite common and until now I implement it as outlined in this question: Right div is floating right and has e.g. width 200px, left div gets a margin-right of 200px.

Therefore, to remove the right div, you have to remove it from HTML and – that’s the unpleasant part – remove the margin-right from the left div.

I’m wondering whether the same can be obtained without making any such changes necessary in the CSS.

Here is the test page: http://pastie.org/1669826

The goal:

div#right present in HTML:        div#right not present in HTML:
+---------------------+           +---------------------+
|                     |           |                     |
+---------------------+           +---------------------+
+----------------+ +--+           +---------------------+
|                | |  |           |                     |
|                | +--+           |                     |
|                |                |                     |
|                |                |                     |
+----------------+                +---------------------+
+---------------------+           +---------------------+
|                     |           |                     |
+---------------------+           +---------------------+

A partial solution which work on FF and WebKit but not on IE: Give div#right a height of 100% and move it inside div#left.

Looking forward to your ideas!

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Assuming equal height columns are desirable, this is a nice method.

    Firstly, make sure you add a doctype as the first line:

    <!DOCTYPE html>

    Otherwise you get Quirks Mode = bad, bad, bad.

    Live Demo
    Live Demo (exact same code with right div removed)

    This will work in every modern browser and IE8. It won’t work in IE7 without some crazy hacks.

    Do you need IE7 support?

    <!DOCTYPE html>
<html>

<head>
<style>
  #header {
    border: 1px solid green;
  }
  #left {
    border: 1px solid red;
  }
  #right {
    border: 1px solid blue;
    width: 300px;
  }
  #footer {
    border: 1px solid green;
  }
  #container {
    display: table
  }
  #left, #right {
    display: table-cell
  }
</style>
</head>

<body>
  <div id="body">

    <div id="header">
      <p>Header</p>
    </div>

    <div id="container">
        <div id="left">
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        </div>

        <div id="right">
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
        </div>
    </div>

    <div id="footer">
      <p>Footer</p>
    </div>

  </div>
</body>

</html>
    • 0