I have a layout where the all of the page content is in a box with rounded corners. This includes the title of the page, etc. I have a div element that contains my header content, a div that contains the main content of the page, and a div that contains the footer. My problem is this: Since the border of my "header" div is not rounded, the large "container" div seems to not be rounded at the top. I have investigated, and shown that this is simply the "header" div superimposing itself over the "container" div. I have an example here: http://jsfiddle.net/V98h7/.
I have tried rounding the border of the "header" div to the same extent, but this creates a small defect on the border (it gains a border of its own, of the "header" div's background color).
Out of desperation, I also tried setting the z-index of the container to a large number. THat did not do anything.
I feel that there should be a simple solution to this problem. I do not want a javascript fix. I would prefer CSS, but LESS is ok too.
Here is the fiddle - http://jsfiddle.net/ashwyn/V98h7/2/
Add -
#outer {
overflow: hidden;
}
and it will work.
More information on the overflow property can be found on MDN.