Enforce a "Min-Margin" for a Fluid Layout

Enforce a min-margin for a fluid layout

What I wound up doing was adding a wrapper around #page. It's not what I would want in a perfect world, but I would want min-margin in a perfect world (or at least margin: min())!

On the wrapper, I applied margin: 0 13.25em; where the 13.25em was where I wanted #page to stop sliding left. The equal margins on both sides leave #page centered without a 13.25em shift to the right. Because I used margins instead of padding, the right side can overflow the browser without causing the horizontal scrollbar to appear.

It seems to be a good fix. I had originally been looking for something more "clever" without adding HTML, but this was simple enough and seems effective enough that it appears to be well worth the extra markup.

Using a auto margin in css but want a minimum margin

If i saw your code & question may be you can write like this:

div{
 margin:5px 10% 5px 5%;
}

Check this for more http://jsfiddle.net/spVNu/1/

Can we define min-margin and max-margin, max-padding and min-padding in css?

Yes, you can!

Or if not those terms exactly, then at least the next best thing. In 2020 this is now very straightforward using the CSS math functions: min(), max(), and clamp().

A min calculation picks the smallest from a comma separated list of values (of any length). This can be used to define a max-padding or max-margin rule:

padding-right: min(50px, 5%);

A max calculation similarly picks the largest from a comma separated list of values (of any length). This can be used to define a min-padding or min-margin rule:

padding-right: max(15px, 5%);

A clamp takes three values; the minimum, preferred, and maximum values, in that order.

padding-right: clamp(15px, 5%, 50px);

MDN specifies that clamp is actually just shorthand for:

max(MINIMUM, min(PREFERRED, MAXIMUM))

Here is a clamp being used to contain a 25vw margin between the values 100px and 200px:

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

.container {
  width: 100vw;
  border: 2px dashed red;
}

.margin {
  width: auto;
  min-width: min-content;
  background-color: lightblue;
  padding: 10px;
  margin-right: clamp(100px, 25vw, 200px);
}

<div class="container">
  <div class="margin">
    The margin-right on this div uses 25vw as its preferred value,
    100px as its minimum, and 200px as its maximum.
  </div>
</div>

I need a max-margin CSS property, but it doesn't exist. How could I fake it?

Spacer divs on either side of the content divs. Those are your margins. Set their max width using the max-width property.

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

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>

How to create a 3 columns fluid fixed fluid layout?

You can try to use inline-blocks for it. They are used rather rarely, but sometimes they are pretty good for layouts.

So, look at this: http://jsfiddle.net/kizu/UUzE9/ — with inline-blocks you can create layouts with any number of fixed and fluid columns. The algorithm:

At first, you add the padding equal to the sum of all the fixed columns to the wrapper. In your case — 250px.
Then, you add min-width to the wrapper equal to the sum of all the fluid columns' min-width.
Then, you add white-space: nowrap to the wrapper, so the columns won't jump.
And then just add the all columns that you need.

If you need support for IE7 and lesser, there are some additional things to know except for common inline-block fix:

You must return white-space: normal to the inner child of a column, or the columns won't stay on one line.
There can appear a phantom scroll in IE, maybe there is a better way to remove it, but I just use overflow: hidden on some wrapper.

Enjoy :)

Enforce a "Min-Margin" for a Fluid Layout