CODEWITHSUNDEEP
htmlcssmargin
Trindaz
Trindaz

Reputation: 17849

css min-margin for vertical margins

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>

Upvotes: 1

Views: 572

Answers (1)

Bilal Akil
Bilal Akil

Reputation: 4755

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)

Upvotes: 2

Related Questions