DoUtDes DoUtDes - 7 months ago 15
HTML Question

Border-Box resizing out of view

so lately I came up with this problem: My wrapper has a max-width of 1440px and I want to add a 10px solid border around it. When I add it the border just takes 10px of the max-width and is being displayed, everything's fine. But I want that the border does not take anything of the max-width, I want to display the 10px of the border by 1440px +

One solution would be media queries, I know that, and this also works fine. I am just wondering if there is a solution without adding a seperate wrapper and without media queries so the border just appears, when you resize your window over the 1440px and simply is cut off when you resize the window under 1440px.

Just for anybody who is wondering. I have a boxed layout and want to limit the content area for larger screens, but whish to use full-width on smaller screens.

Thanks! :-)


You could possibly add a position relative to the container and have a z-index set. Then have a pseudo item like :before have position absolute and a negative z-index with the height and width set to match the parent. This will put it behind your content and if you have the border added to it you should be set. Probably will need overflow-x:hidden on the body so it doesn't create a scroll bar. I'll create the code for this soon for reference.

Or a less complex option would be

outline:10px solid blue;

Outline goes outside of an element even with box-sizing of border-box.