CODEWITHSUNDEEP
htmlcss
ainwood
ainwood

Reputation: 1048

issue filling div width in css

I am just learning website layout, and I am trying to create a fairly simply page to display some images. I have tried to set something up with a fixed left-hand column, and a fixed banner across the top. I then have a "contentcontainer", in which I put "content". I have done it this way with the intent that: 1.) I can have the "content" width scale to 80% of the available contentcontainer width, with a box shadow effect. 2.) If the content height gets too long, it allows the user to scroll down.

The problem that I have is that I want the "contentcontainer" to take-up the available width, such that the "content" then scales to match. If I set the contentcontainer width to "auto", instead of taking up the available width of the underlying element, it instead scales itself only to what is need for the "content".

I have tried searching here for answers, but am just getting horribly confused. Please advise!

I can make it work on my default screen resolution by setting the contentcontainer width to 89.6%, but that is clearly not the preferred solution. How can I get the contentcontainer width to fill the required space dynamically?

@font-face {
  font-family: SourceSans;
  src: url('fonts/SourceSansPro-Light.otf');
  font-weight: normal;
}
@font-face {
  font-family: SourceSans;
  src: url("fonts/SourceSansPro-Bold.otf");
  font-weight: bold;
}
tr:nth-child(even) {
  background: #FFF
}
tr:nth-child(odd) {
  background: #E6FCFF
}
h1 {
  font-family: Verdana, Geneva, sans-serif;
  font-size: 32px;
  padding-left: 20px;
}
h2 {
  font-family: SourceSans, sans-serif;
  font-size: 42px;
  padding-left: 20px;
  margin: 2px;
}
h3 {
  font-family: Verdana, Geneva, sans-serif;
  font-size: 16px;
}
img {
  vertical-align: middle;
}
body#template {
  margin: 0px;
  padding: 0px;
  border: none;
  overflow: auto;
  height: 100%;
  max-height: 100%;
  background-color: grey;
}
div#topimage {
  position: fixed;
  width: 200px;
  height: 120px;
  left: 0px;
  top: 0px;
  background: navy;
  color: white;
  overflow: hidden;
  padding: 20px;
}
div#leftmenu {
  position: fixed;
  width: 200px;
  height: 100%;
  left: 0px;
  top: 120px;
  background: navy;
  color: white;
  overflow: hidden;
}
div#topbanner {
  position: fixed;
  width: 100%;
  height: 60px;
  left: 200px;
  top: 0px;
  background: navy;
  color: white;
  overflow: hidden;
  padding: 0px;
  margin: 0px;
}
div#contentcontainer {
  display: inline;
  width: 89.6%;
  position: fixed;
  height: 100%;
  top: 60px;
  left: 200px;
  background: grey;
  overflow: auto;
  border: none;
}
div#content {
  position: relative;
  width: 80%;
  padding: 10px;
  margin-top: 30px;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 200px;
  background-color: #FAFAFA;
  border: 1px solid black;
  box-shadow: 10px 10px 20px black;
  overflow: auto;
  height: auto;
  padding-bottom: 100px;
}
li {
  font-family: SourceSans, sans-serif;
  font-size: 24px;
  list-style-type: none;
  margin-left: -15px;
}
.chart {
  box-shadow: 5px 10px 15px #888888;
  margin-left: 40px;
  display: block;
  margin-left: auto;
  margin-right: auto;
}
p.chartheading {
  font-family: SourceSans, sans-serif;
  font-size: 42px;
  font-weight: bold;
  padding-left: 40px;
  padding-bottom: 20px;
  margin: 2px;
  text-decoration: underline;
}
<!DOCTYPE HTML>
<html>

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=windows-1252"></meta>
  <title>Template Example</title>
  <link rel="stylesheet" type="text/css" href="template.css"></link>
</head>

<body id="template">

  <div id="topimage">
    <img src="images/logo.gif"></img>
  </div>
  <div id="leftmenu">
    <ul>
      <li>Item 1</li>
      <li>Item 2</li>
      <li>Item 3</li>
    </ul>
  </div>

  <div id="topbanner">
    <h2>Template:   Page Header</h2>
  </div>

  <div id="contentcontainer">
    <div id="content">
      <br></br>
      <p class="chartheading">First Chart</p>
      <img class="chart" src="graphs/first_chart.png"></img>
      <br></br>

      <br></br>
      <p class="chartheading">Second Chart</p>
      <img class="chart" src="graphs/second_chart.png"></img>
      <br></br>

      <br></br>
      <p class="chartheading">Third Chart</p>
      <img class="chart" src="graphs/third_chart.png"></img>
      <br></br>
      <br></br>
      <p class="chartheading">Third Chart</p>
      <img class="chart" src="graphs/third_chart.png"></img>
      <br></br>
      <br></br>
      <p class="chartheading">Third Chart</p>
      <img class="chart" src="graphs/third_chart.png"></img>
      <br></br>
      <br></br>
      <p class="chartheading">Third Chart</p>
      <img class="chart" src="graphs/third_chart.png"></img>
      <br></br>
      <br></br>
      <p class="chartheading">Third Chart</p>
      <img class="chart" src="graphs/third_chart.png"></img>
      <br></br>
      <br></br>
      <p class="chartheading">Third Chart</p>
      <img class="chart" src="graphs/third_chart.png"></img>
      <br></br>

    </div>
  </div>

</body>

</html>

Upvotes: 0

Views: 53

Answers (1)

Stickers
Stickers

Reputation: 78686

You can use calc add this to your CSS:

div#contentcontainer {
    width: calc(100% - 200px);
}

http://jsfiddle.net/8bk21tx6/

Leave you comments below if that fixes the issue.

Upvotes: 2

Related Questions