CODEWITHSUNDEEP
htmlcss
TheFooProgrammer
TheFooProgrammer

Reputation: 2507

How can I implement this two column fluid-fluid layout, with extra width constraints on the first column, without using CSS 3 features?

Here's the layout:

Fluid-Fluid Layout

It is essentially a two column fluid-fluid layout, with the first column's specs being:

width: 30%;
min-width: 200px;
max-width: 300px;

Height of the columns should be in-sync, but not a constant value.

For the record, I tried using table and table-cell displays, but Firefox, Safari, and Chrome ignore max-width for the table-cell, so that solution does not work.

Upvotes: 0

Views: 413

Answers (1)

kevincoleman
kevincoleman

Reputation: 493

Below is a solution I worked out. See it live here on my test server.

Because you want to use both pixel values and percentages you inherently limit the percentages to work within the scope you define with pixel values. For example, this means that when the left column is its smallest (200px), that equates to 30% and forces the remaining 70% to be 466px. This is just a limitation of using both pixel values and percentages... but it’s the best I’ve got without using Javascript.

Hope this helps!

<head>
  <title>twoColumn</title>
  <style type="text/css">

    body {
      margin: 0;
      padding: 0;
      overflow: hidden;
    }

    div.wrap {
      background-color: yellow; /* for illustration's sake */
      margin: 0 auto; /* to center it all, for illustration's sake */
      min-width: 700px;
      max-width: 1000px;
      overflow: hidden; /* to hide the overrun from the 3000px of faux-column padding*/
    }

    div.column1 {
      background-color: blue; /* for illustration's sake */
      width: 30%;
      max-width: 300px;
      min-width: 200px;
      float: left;
      margin: 0 -30% -3000px 0; /* to offset the faux-column padding */
      padding-bottom: 3000px; /* to create a faux-column appearance after the left column's content */
    }

    div.column2 {
      float: right;
      width: 70%;
    }

    .clear {
      clear: both;
    }

  </style>
</head>

<body>
  <div class="wrap">

      <div class="column1">
        column1<br />
        column1<br />
        column1<br />
        column1<br />
        column1<br />
        column1<br />
        column1<br />
        column1<br />
        column1<br />
        column1<br />
        column1<br />
        column1<br />
        column1<br />
        column1<br />
        column1<br />
        column1
      </div> <!-- end .column1 -->

      <div class="column2">
        column2 column2 column2 column2 column2 column2 column2 column2 column2 column2 column2 column2 column2 column2 column2 column2 column2 column2 column2 column2 column2 column2 column2 column2 column2 column2 column2 column2 column2 column2 column2 column2 column2 column2 column2 column2 column2 column2 column2 column2 column2 column2 column2 column2 column2 column2 column2 column2 column2 column2 column2 column2 column2 column2 column2 column2 column2 column2 column2 column2 column2 column2 column2 column2 column2 column2 column2 column2 column2 column2 column2 column2 column2 column2 column2 column2 column2 column2 column2 column2 column2 column2 column2 column2 column2 column2 column2 column2 column2 column2 column2 column2 column2 column2 column2 column2 column2 column2 column2 column2 column2 column2 column2 column2 column2 column2 column2 column2 column2 column2 column2 column2 column2 column2 column2 column2 column2 column2 column2 column2 column2 column2 column2 column2 column2 column2 column2 column2 column2 column2 column2 column2 column2 column2 column2 column2 column2 column2 column2 column2 column2 column2 colunn2
      </div> <!-- end column 2 -->

      <div class="clear"></div>

  </div> <!-- end .wrap -->
</body>

Upvotes: 1

Related Questions