Search code examples
cssscale

Scaling div width with

I have a video and a chat window and I'd like the video (green) to scale up/down in size with the browser. The Chat (red) should stay the same width and stay fixed to the right with a small margin of 25px between them.

What would be the best way to achieve this?

Screen shot:

Desired layout

Here's a screenshot of my code (it won't let me paste it in here for some reason): http://www.evernote.com/shard/s321/sh/2ed5d114-5cde-4104-8a85-fb6b62babbd2/a9de27520e13d21b39bf9bb90e439985

Solution

  • Try the following:

    #live-video-div{
  float:left;
  width: calc(100% - 275px);
  height: 100%;
  margin: 0;
  background: green;
}
#chat-div{
  float: left;
  width: 250px;
  height: 300px;
  margin: 0 0 0 25px;
  background: red;
}

    Demo: http://www.cssdesk.com/59B2G