Div width 100% minus fixed amount of pixels

html css height width
Removed_account picture Removed_account · Mar 16, 2009 · Viewed 249.1k times · Source

How can I achieve the following structure without using tables or JavaScript? The white borders represent edges of divs and aren't relevant to the question.

Structure 1

The size of the area in the middle is going to vary, but it will have exact pixel values and the whole structure should scale according to those values. To simplify it, I'd need a way to set "100% - n px" width to the top-middle and bottom-middle divs.

I'd appreciate a clean cross-browser solution, but in case it's not possible, CSS hacks will do.

Here's a bonus. Another structure I've been struggling with and end up using tables or JavaScript. It's slightly different, but introduces new problems. I've been mainly using it in jQuery-based windowing system, but I'd like to keep the layout out of the script and only control the size of one element (the middle one).

Structure 2

Answer

rom_j picture rom_j · Feb 4, 2013

New way I've just stumbled upon: css calc():

.calculated-width {
    width: -webkit-calc(100% - 100px);
    width:    -moz-calc(100% - 100px);
    width:         calc(100% - 100px);
}​

Source: css width 100% minus 100px

Related questions

Canvas is stretched when using CSS but normal with "width" / "height" properties

I have 2 canvases, one uses HTML attributes width and height to size it, the other uses CSS: <canvas id="compteur1" width="300" height="300" onmousedown="compteurClick(this.id);"></canvas> <canvas id="compteur2" style="width: 300px; height: 300px;" …

Read More
How to make a div 100% height of the browser window

I have a layout with two columns - a left div and a right div. The right div has a grey background-color, and I need it to expand vertically depending on the height of the user's browser window. Right now …

Read More
Make body have 100% of the browser height

I want to make body have 100% of the browser height. Can I do that using CSS? I tried setting height: 100%, but it doesn't work. I want to set a background color for a page to fill the entire browser window, …

Read More