Home/ Questions/Q 7079783
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-28T06:42:52+00:00

I’m having trouble creating this design. The #container should be centered, with it’s two

  • 0

enter image description here

I’m having trouble creating this design. The #container should be centered, with it’s two children #navigation and #content stretching to the bottom of the browser. Like this for example.

#container {
  width: 960px;
  height: 100%;
  margin: 0 auto;
}
#navigation {
  width: 200px;
  height: 100%;
  float: left;
}
#content {
  width: 760px;
  height: 100%;
  float: left;
}

But I don’t know how I can create the colored blank spaces outside the container, which will blend in with the #navigation and #content creating a seamless transition from the #container to the blank space outside.

The transition between the #navigation and the #content should be the only visible.

I’ve tried floating the #container with two other div’s containing the same background-color as #navigation and #content, but that messes it up, and trows it out of the center. How can I have my #container centered and have two div’s on each side to fill in the remaining space?

Also, the blue and the red “blank” spaces was supposed to be equally wide. Besides that the drawing is accurate.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    See: http://jsbin.com/amunuz

    <!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
<style>
  html, body {
    height: 100%;
  }
  body {
    margin: 0;
    background: -moz-linear-gradient(left, #ff0000 50%, #00a9ff 50%);
    background: -webkit-gradient(linear, left top, right top, color-stop(50%,#ff0000), color-stop(50%,#00a9ff));
    background: -webkit-linear-gradient(left, #ff0000 50%,#00a9ff 50%);
    background: -o-linear-gradient(left, #ff0000 50%,#00a9ff 50%);
    background: -ms-linear-gradient(left, #ff0000 50%,#00a9ff 50%);
    background: linear-gradient(left, #ff0000 50%,#00a9ff 50%);
  }
  #container {
    height: 100%;
    display: table;
    table-layout: fixed;
    width: 960px;
    margin: 0 auto;
  }
  #navigation {
    display: table-cell;
    width: 200px;
    background: #ff0000;
  }
  #content {
    display: table-cell;
    background: #00a9ff;
  }
</style>
</head>
<body>
  <div id="container">
    <div id="navigation">navigation</div>
    <div id="content">content</div>
  </div>
</body>
</html>
    • 0