css min-margin for vertical margins

Question

What needs to change in this code so that: 1) The left column (red) is at least 200px wide, and at most 20% wide 2) The "main" column (black) is at lease 400px wide, and at most 80% wide 3) The columns always remain horizontally adjacent, with the "main" column never wrapping to a new line?

Note: This may appear to be a duplicate of other "min-margin" type css questions here, but I've been through a few to no avail, such as this one: Using a percentage margin in CSS but want a minimum margin in pixels?

<html>
<head>
    <title>Margin Test</title>
    <style>
        #container {
            display: table;
            width: 100%;
            background-color: green;
        }
        #left-column {
            display: table-cell;
            min-width: 200px;
            width: 20%;
            background-color: red;
            float: left;
        }
        #main-column {
            display: table-cell;
            width: 80%;
            background-color: black;
            float: left;
        }
    </style>
</head>
<body>
    <div id="container">
        <div id="left-column">
            left
        </div>
        <div id="main-column">
            main
        </div>
    </div>
</body>

Your logic is flawed. What if the 100% width of the container is less than 600px wide (i.e. the sum of the two widths)? Both elements cannot be a maximum of 80% wide each without wrapping... — BenM, Jan 05 '14 at 21:59
@BenM Then a horizontal scroll bar will appear at the bottom of the browser window — Trindaz, Jan 05 '14 at 22:00
@BuddhistBeast no, because if you resize the output window, they wrap. — BenM, Jan 05 '14 at 22:03
@BuddhistBeast no. The left sidebar now has less width than the minimum 200px. — BenM, Jan 05 '14 at 22:07

Bilal Akil · Accepted Answer · 2014-01-05T22:47:22.627

2

http://jsfiddle.net/p2mdj/

Is that what you want? I removed the...

float: left;

because table-cells automatically figure that out and added a

min-width: 400px

to your main div.

It's now basically a standard table with a minimum width for each cell specified. Tables will pretty much never wrap their cells unless you do some weird stuff (like put floats on them :P)

edited Jan 05 '14 at 22:47

answered Jan 05 '14 at 22:01

Bilal Akil

4,716
5
32
52

Will accept in 7 minutes when available. This solved the problem. Was that jsfiddle link meant to link to a specific fiddle? Or you're saying I should use that in future when asking questions? – Trindaz Jan 05 '14 at 22:04
Uhh I updated that link, it's now to a specific fiddle – Bilal Akil Jan 05 '14 at 22:04

css min-margin for vertical margins

1 Answers1