indented div with flexible width

Question

I am trying to create a div that starts 200px from the left and extends to the edge of the page on the right but not beyond. Right now with 100% as the width it extends 200px beyond the page to the right. Without the width, it still extends beyond by 200px.

Any idea how to make this work?

#MsgBanner{
  position:relative;
  background-color:#333;
  top:60px;
  height:30px;
  z-index:14;
  width:100%;
  left:200px;
}

Answer 1

#MsgBanner{  position:relative;  background-color:#333;  top:60px;  height:30px;  z-index:14;  width:100%;  margin-left:200px;}

I think all you need to do is set the margin on the left to 200px instead.

Answer 2

you could try padding

Answer 3

You could use:

#MsgBanner {
width: auto;
margin-left: 200px;
}

Answer 4

As far as I know, it's not possible without the calc() function introduced in CSS3.

#MsgBanner{
   position:relative;
   background-color:#333;
   top:60px;
   height:30px;
   z-index:14;
   width:calc(100% - 200px);
   left:200px;
}

Above would solve the problem in CSS3, but it's not supported by all browsers.