2 columns, one with min-width and 100% height

Question

I have a wrapper, main and aside elements inside.

I want to have:

wrapper - no fixed height, stretching to the content's height - the longer column of the 2.
aside - left column, width 30%, min-width:340px(with padding), height 100% of wrapper.
main - right column, width auto.

When I set the wrapper to position:relative and aside to position:absolute the 100% height is working, however that breaks the main element's width. Is there any other way to achieve what I need with CSS/SASS only and without being "hackish" with hidden divs and such?

.wrapper{
    border:$contentborder;
    background: $contentgradient;
    border-radius:3px;
    text-align: center;
    margin: auto;
}
main{
    text-align: left;
    overflow-x: hidden;
}
aside{
    float: left;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    width: 30%;
    min-width: 340px;
    padding: 20px;
    padding-left: 0;
    height: 100%;
    text-align: left;
}

http://jsfiddle.net/2m503b8e/

The suggested duplicate answer is not the real answer. As much as I like css3 flex, it doesn't respect the width:30% style. Both columns will be 50% width or one will have only the min-width. — user2656313, Aug 28 '14 at 14:24
Just because the chosen answer is not one you like doesn't make this not a duplicate. There are thousands of "how do I equal height columns?" questions on SO, the chosen question happens to have a number of different ways of solving the problem. Don't like the chosen answer? Pick one of the others. — cimmanon, Aug 28 '14 at 14:27

score 0 · Answer 1 · answered Aug 28 '14 at 14:00

0

Assign some height for your parent div for instance height:209px; to your .wrapper

DEMO

You can also use min-height: value to your main and aside

answered Aug 28 '14 at 14:00

Benjamin

2,612
2
20
32

o--oOoOoO--o · Answer 2 · 2014-08-28T14:07:13.237

You need to add a margin-left to main, that equals the width of aside:

main {
    margin-left: 340px;
}

You might be interested in creating breakpoints for the min-width/width values though. For screens with viewport size of greater than 1033px, the width of aside will become 30%, so your margin-left needs to be 30%.

@media screen and (min-width: 1033px) {
    main {
        margin-left:30%;
    }
}

Fiddle: http://jsfiddle.net/2m503b8e/5/

score -1 · Accepted Answer · answered Aug 28 '14 at 14:00

There are several ways of achieving this. Probably the easiest is to make the elements display like a table:

.wrapper{
    border:$contentborder;
    background: $contentgradient;
    border-radius:3px;
    text-align: center;
    margin: auto;
    background:gray;
    display:table; /* make this act as a table */
}
main{
    text-align: left;
    overflow-x: hidden;
    background: red;
    padding:2em;
    display:table-cell; /* make this act as a table cell */
}
aside{
    /*float: left; */
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    width: 30%;
    min-width: 340px;
    padding: 20px;
    padding-left: 0;
    /* height: 100%; */
    text-align: left;
    background:orange;
    display:table-cell; /* make this act as a table cell */
}

http://jsfiddle.net/2m503b8e/3/

I've no objection to down-votes but please explain why it was given? In what way does this not satisfy the OP's requirements? — Moob, Aug 28 '14 at 14:04
Yes it is puzzling for the downvotes. I think your solution will work, thanks. — user2656313, Aug 28 '14 at 14:32

2 columns, one with min-width and 100% height

3 Answers3