CODEWITHSUNDEEP
htmlcssresponsive-design
user429620
user429620

Reputation:

Fixed Width Sidebar, Fluid Content area with 100% width table

I've got this fiddle: http://jsfiddle.net/gpxeF/1793/

with the following CSS: 

.sidebar{ 
    width: 200px;
    float: left;
    background: yellow;
}
.content {
    background: green;
}
table {
    width: 100%;
    background:#ccc;
}

The problem is the table, due to having set it at 100% it actually goes below the sidebar. If I remove the width: 100% rule it works fine, but I need the table to use up all the space of the parent div container.. How can I accomplish that?

Upvotes: 1

Views: 1187

Answers (4)

KFunk
KFunk

Reputation: 3152

A more common and I think better solution is to use a margin that's the size of your sidebar to stop your content from flowing under your sidebar:

#fixedWidth{ 
    width: 200px;
    float: left;
    background: blue;
}
#theRest{
    background: green;
    margin-left: 200px;
}

jsfiddle

Upvotes: 2

Asons
Asons

Reputation: 87191

Today (end of 2015) you could do this instead (works for IE8/9 as well).

.table {
    display: table;
    width: 100%;
}
.cell {
    display: table-cell;
}
.sidebar{ 
    width: 200px;
    background: yellow;
}
.content {
    background: lightgreen;
}
<div class="table">
    <div class="cell sidebar">
      Fixed<br />Sidebar<br />Goes<br />Here
    </div>
    <div class="cell content">
      Test
    </div>
</div>

Or with flex for the newest browsers.

.flex {
    display: flex;
    width: 100%;
}
.sidebar{ 
    width: 200px;
    background: yellow;
}
.content {
    flex: 1;
    background: lightgreen;
}
<div class="flex">
    <div class="sidebar">Fixed<br />Sidebar<br />Goes<br />Here
    </div>
    <div class="content">
        test
    </div>
</div>

Upvotes: 1

vas
vas

Reputation: 960

i think this might work

HTML

<div class="sidebar">Fixed<br />Sidebar<br />Goes<br />Here</div>
<div class="content">
    <table>
        <tr><td>test If a !DOCTYPE is not specified, the border-collapse property can produce unexpected results in IE8 and earlier versions.</td></tr>
    </table>
</div>

CSS

.sidebar{ 
    width: 200px;
    float: left;
    background: yellow;
}
.content {
    background: green;
    float: left;
     width: calc(100% - 200px);
}    
table {

    background:#ccc;
}

Link : jsfiddle

Upvotes: 1

kuldeep.kamboj
kuldeep.kamboj

Reputation: 2606

I am not a css guy but i think you need to add width and float-left for content div too. You need something like 

.content {
    background: green;
    width: 400px;
    float: left;
}

JSFiddle http://jsfiddle.net/rhzky40e/

Upvotes: 1

Related Questions