CODEWITHSUNDEEP
csstwitter-bootstrap
bernhardh
bernhardh

Reputation: 3309

CSS: Position left: 250px, but overflow hidden

I have a sidebar which is shown and hidden by JS with css animations. For this, I need to position the content div (#main) with left: 250px;.

#main {
  left: 250px;
  position: relative;
  overflow: hidden;
}

Inside the #main-div there is some content. For example a big table

<div id="sidebar">
    SIDEBAR
</div>
<div id="main">
    <table style="width: 100%" class="table">
        <tr>
            <td>SOME BIG CONTENT1...</td>
            <td>SOME BIG CONTENT2...</td>
            <td>SOME BIG CONTENT3...</td>
            <td>SOME BIG CONTENT4...</td>
            <td>SOME BIG CONTENT5...</td>
            <td>SOME BIG CONTENT6...</td>
        </tr>
    </table>
</div>

My question/problem: How to prevent the horizontal scroll bar?

See https://jsfiddle.net/3y6hpeyw/

EDIT: Solution of KCarnaille: See https://jsfiddle.net/3y6hpeyw/12/

The only problem with this, is the lack of support for older browser (http://caniuse.com/#feat=calc).

Upvotes: 2

Views: 113

Answers (2)

Asons
Asons

Reputation: 87191

You can do this, and it animates nice together with your sidebar.

Check out your fiddle demo

.sidebar-open #main {
  margin-left: 250px;
}

Upvotes: 1

KCarnaille
KCarnaille

Reputation: 1057

Add to #main : 

 width: calc(100% - 250px);

It works with the fiddle you gave.

Upvotes: 1

Related Questions