CODEWITHSUNDEEP
htmlcss
DasCodes
DasCodes

Reputation: 334

How do I define a content 100% while having a sidebar?

I have this structure for my website as below. How do I define red area as 100%, while it has a sidebar with 260px width and the sidebar is fixed. enter image description here

Upvotes: 0

Views: 80

Answers (3)

putvande
putvande

Reputation: 15213

If you can use CSS3 you can use calc:

#wrapper {
    width: calc(100% - 260px);
}

#sidebar {
    width: 260px;
}

Upvotes: 1

qwaz
qwaz

Reputation: 1305

Please see if this will work for you:

Demo: http://jsfiddle.net/dDULw/2/

HTML

<div id="outer">
    <div id="sidebar">
        sidebar
    </div>
    <div id="wrapper">
        wrapper
    </div>
</div>

CSS

#outer {
    overflow: hidden;
    border: 3px solid #000;
    width: 600px;
    height: 300px;
}
#sidebar {
    float: left;
    border: 5px solid blue;
    width: 130px;
    height: 250px;
}
#wrapper {
    overflow: hidden;
    border: 5px solid red;
    height: 250px;
}

Upvotes: 0

Gianluca Mancini
Gianluca Mancini

Reputation: 1312

#sidebar {
  position: fixed;
  width: 260px;
}

#wrapper {
  width: 100%;
  box-sizing: border-box;
  padding-left: 260px;
}

Upvotes: 0

Related Questions