Margin around floated element? - html

Question

I am working with a page layout that has a sidebar/callout box that's floated to one side of a large chunk of text content, and the text content may have some notice banners with a different background color sprinkled throughout.
Here is the issue (full JSFiddle here):
Undesired:
As the text in the mockup says, note the pink "notice" banner is overlapped by the yellow sidebar (margin only kicks the text back, not the edge of block elements that overlap it). I would like it to look more like:
With the pink background stopping at the margin of the sidebar. I was able to accomplish this in the mockup by setting a width of the notice banner (because I knew it would intersect the sidebar), but if that notice appears further down the page, it wouldn't expand to the full width, then.
Is there some sort of structure/style that would let me accomplish this sort of appearance, and be flexible as to where the notice banner appears within the content?

Answer 1

You could simply add overflow: auto to your notice to stop its background from leaking behind the sidebar, while preserving the margin on the sidebar.
The reason this works is because overflow that isn't visible interferes with floats as it creates a new block formatting context. Usually, this results in the box simply not intersecting the float (and its margins, if any). Keep in mind that, due to this, if any part of a notice box would otherwise intersect the float, this would cause the entire notice box and its contents to be restricted to the narrower width. You can see this by adding/moving text in the surrounding paragraphs and the notice box itself (I can't easily demonstrate this with a fiddle link).
The spec has this to say, in section 9.4:
In a block formatting context, each box's left outer edge touches the left edge of the containing block (for right-to-left formatting, right edges touch). This is true even in the presence of floats (although a box's line boxes may shrink due to the floats), unless the box establishes a new block formatting context (in which case the box itself may become narrower due to the floats).
Which points to section 9.5:
The border box of a table, a block-level replaced element, or an element in the normal flow that establishes a new block formatting context (such as an element with 'overflow' other than 'visible') must not overlap the margin box of any floats in the same block formatting context as the element itself. If necessary, implementations should clear the said element by placing it below any preceding floats, but may place it adjacent to such floats if there is sufficient space. They may even make the border box of said element narrower than defined by section 10.3.3. CSS2 does not define when a UA may put said element next to the float or by how much said element may become narrower.
While the second quote sounds daunting towards the end, the behavior you see here is quite consistent, and not an edge case where you would start to see deviations in implementation.

Answer 2

You can be clever, and use a white border to hide the contents behind it.
Like this:
.sidebar {
border-left: 1em solid #FFF;
}
Example: http://jsfiddle.net/UrsLW/7/
And the result:

Answer 3

enclose your SideBar with another wraper
HTML:
<div id="test">
<div class="sidebar">
</div>
</div>
CSS:
#test
{
/*moved from your old siderbar*/
float:right;
width:40%;
padding-left:1em;
/*essential*/
background-color:white;
}
.sidebar
{
padding:1em;
background-color:#FFC;
}
look here: http://jsfiddle.net/UrsLW/11/

Answer 4

First thing that came to my mind was using CSS3's box-shadow, maybe?
.sidebar {
float:right;
width:40%;
padding:1em;
margin-left:1em;
background-color:#FFC;
box-shadow: 0px 0px 0px 1em #fff;
}
Or even a simple border would work, for that matter.
.sidebar {
float:right;
width:40%;
padding:1em;
margin-left:1em;
background-color:#FFC;
border: 1em #fff solid;
}
This would work only with single-colored backgrounds, of course.
http://jsfiddle.net/UrsLW/5/