[Solved] Fluid, Fixed Margin, 100% Scaled & Centered Content Block

[Devin923]

I have a CSS Challenge that I want to put out there.

The task is to Create a centered content block with a fixed pixel margin, without using JS. The idea is to find out if this can be done. So for example I want a fixed area around the content block ( in this case 100px ), and the content area should be the remaining space left in the window.

If the window area is 320×240 or 10,240×7,680 the area around the content should remain 100px wide (Top, Right, Bottom, Left). The solution should be compatible back to IE8 at least. Below is a starting point for your solution.

http://codepen.io/anon/pen/sBAfv/

You may use any HTML element and CSS as long as it is supported back to IE8, keep in mind this challenge is to find out if this can be done without JS. Oh and the window should not have scroll bars. Thanks for all those who give this a shot!

Notes:
FF, Box Model is apparently broken for tables and positioning elements inside the TD when using cellspacing, it is noticeable that the elements are positioned off the TABLE instead.

Chrome, does not refresh vertically scaled elements when using the top and bottom handles on the window.

Centered percentage widths do not count for this solution. The center element has to be 100% width and height and the margin must be fixed by pixels. The margin can be made anyway you can think of ( i.e. Margin, Padding, Cellspacing, etc… ).

[Paulie_D]

Arguable that this should be in CSS Combat since we’re not troubleshooting a specific problem but <shrugs>…whatever`.

CSS Hacks

Please define what we can’t use.

[Devin923]

Sure, I was not clear on where this post should sit, let me know if you think it fits better in another section. As for the Hacks I will modify the post, but for the sake of viewing possible solutions I will negate that requirement as I think the solution will still be challenging. Thanks Paulie!

[Paulie_D]

Doesn’t padding on the body do that? :http://codepen.io/Paulie-D/pen/HBLKG/

[Devin923]

No, padding when added to the TOP and BOTTOM results in the window being the View Height + Padding Top and Bottom causing a scroll bar. Although Horizontally, Yes this works.

[Paulie_D]

No, padding when added to the TOP and BOTTOM results in the window

Hence my Codepen example…

Although Horizontally, Yes this works.

So that was easy then… :)

[Devin923]

the area around the content should remain 100px wide.

This should include the top and bottom.

and the window should not have scroll bars.

The gotcha on this challenge is horizontal scaling, that is the premiss.

[Paulie_D]

Aha…border on the body works…I think

http://codepen.io/Paulie-D/pen/nzCbp/

IE8 compatible with box-sizing:border-box

[Devin923]

Border, with a transparency does work. Can’t believe I didn’t try that, I originally counted that out because border normally adds to the dimensions, but this appears to be correct.

Nice work, Thanks Paulie!

[Paulie_D]

Phew…although you should be aware that IE8 doesn’t support transparency.

[Devin923]

Transparency for images, but according to the W3C it appears that border with the color value of transparent is supported back to IE7. However the Box-Sizing only goes back to IE8. So I am good with that. I will have to test on IE8 when I get home to verify that this could actually work.

The best thing about the border solution is that by removing the View Height and View Width Measurements Chrome resizes the elements properly now, and Using a clean block element like a DIV is preferable for positioning content inside.

Technically you could swap out the BORDER for PADDING and not worry about the TRANSPARENCY

PS – Nice choice in BG Color by the way!

[Author]

Posts