CODEWITHSUNDEEP
htmlcss
Shivam
Shivam

Reputation: 2248

One column static width while other colum is dynamic width

<div class="table">
    <div class="sidebar"></div>
    <div class="content"></div>
</div>

* {
    margin:0; padding:0;
}
html, body {
    width:100%;
    height:100%;
}
.table { 
    display:table;
    width:100%;
    height:100%;
}
.sidebar {
    width:200px;
    height:100%;
    background:red;
    display:table-cell;
    white-space:nowrap;
    vertical-align: top;
}
.content {
    width:100%;
    height:100%;
    background:orange;
    display:table-cell;
    vertical-align: top;
}

What am I missing exactly? :), trying to replicate this structure: http://dev.brigademarketing.com/brigade/old-content/site1/

fiddle: http://jsfiddle.net/8o50f0cf/

Upvotes: 0

Views: 56

Answers (2)

DRD
DRD

Reputation: 5813

Here's a solution that uses calc() function and floating: http://jsfiddle.net/jyx9orLy/.

HTML:

<div class="container">
    <div class="sidebar"></div>
    <div class="content"></div>
</div>

CSS:

* {
    margin: 0; 
    padding: 0;
}

html, body, .container {
    height: 100%;
}

.container .sidebar {
    height: 100%;
    background-color: red;
    width: 200px;
    float: left;
}

.container .content {
    float: left;
    height: 100%;
    width: calc(100% - 200px);
    background-color: orange;
}

A second solution is to use a table, which you are doing, and to make it work you do what @LcSalazar mentioned.

A third solution uses flexbox specification and requires a modern browser: http://jsfiddle.net/yp49uqay/.

CSS:

* {
    margin: 0; 
    padding: 0;
}

html, body, .container {
    height: 100%;
}

.container {
    display: flex;
    flex-direction: row;
}

.container > .sidebar {
    flex: 0 0 200px;
    background-color: red;
}

.container > .content {
    flex: 1 1 auto;
    background-color: orange;
}

And, a fourth solution that uses floating in a different way: http://jsfiddle.net/079sr0fu/.

HTML:

<div class="container">
    <div class="sidebar"></div>
    <div class = "contentWrapper">
        <div class="content">Content...</div>
    </div>
</div>

CSS:

* {
    margin: 0; 
    padding: 0;
}

html, body, .container, 
.container > .sidebar, 
.container > .contentWrapper,
.container > .contentWrapper > .content {
    height: 100%;
}

.container > .sidebar {
    width: 200px;
    background-color: red;
    float: left;
}

.container > .contentWrapper {
    overflow: hidden;
}

.container .content {
    float: left;
    width: 100%;
    background-color: orange;
}

Upvotes: 0

LcSalazar
LcSalazar

Reputation: 16831

Remove the width:100% from the dynamic column, so it can calculate its width automatically.

Updated Fiddle

A display: table-cell element acts like a <td>, meaning that it takes the remaining space of its table parent if no width is define.

Upvotes: 3

Related Questions