Question

I need to make ui controls panel, that has 100% width and gradient background. UI elements on this control panel should have width 1000px and should be centered.

For a moment i have two elements:
panel (width 100%, gradient background), global wrapper
panel-wrapper (width 1000px, transparent background), is placed inside “panel” element, contains UI elements.

It works brilliant in all browsers i need, but i really don’t like to use two HTML elements, when logically it should be just one. Perhaps it is possible to have one element “panel” with fixed width (1000px) and auto-padding, that will cover all free space to the left and to the right? (i’ve made an image to show it if my explanation is crazy :))

It is possible?

Answer 1

You could potentially use the calc() function, though it isn’t highly browser compliant.

Here is a quick example and more information on compatibility and usage can be found here.

*I made the example in Firefox, didn’t test it elsewhere.

Just for a quick code example, the following shows one solution:

div {
    width: 100px;
  background-color: blue;
  height: 100px;
  padding-left: calc(50% - 50px);
  padding-right: calc(50% - 50px);

}