How to get wrapping div to "hug" svg elements? - css

Question

This question refers to the situation shown in this jsFiddle.
As you can see, currently, the div (aka .svg-container; orange background) that contains the svg elements (white background) is about 70px wider than it needs to be. Can I get this div to "shrink-to-fit" its contents using no JS?
EDIT: Just to be clear, the shape and positioning of the remaining elements should remain unaffected by the change. The only thing that should change is the shape .svg-container, and this should be in a way that the orange fringe along its right side has the same width as it has along the three other sides. The final result should look like this. (Of course, to produce this second jsFiddle, I had to explicitly set the width of .svg-container, which is not the kind of solution I'm looking for. I'm looking for the CSS that would translate into "extend beyond content's right edge the same amount as that beyond other three edges.")
And now, the obligatory source code:
*{
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
box-sizing:border-box;
margin:0;
font-family:consolas,monaco,courier,monospace;
}
.centered{
max-width:280px;
background-color:red;
padding:15px;
margin:0 auto;
}
.content{
width:100%;
color:#8f8;
background-color:#333;
}
table td:first-child{
width:75px;
}
.svg-container{
line-height:0;
background-color:orange;
}
svg{
margin:1px;
}
rect {
shape-rendering:crispEdges;
stroke:none;
fill:white;
}
td{
vertical-align:top;
}
<div class="centered">
<div class="content">
<table><tr>
<td>
<div><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam elementum, lectus ut consectetur mattis,</p></div>
</td>
<td>
<div class="svg-container">
<svg width="50" height="50"><rect width="50" height="50"></rect></svg><svg width="50" height="50"><rect width="50" height="50"></rect></svg><svg width="50" height="50"><rect width="50" height="50"></rect></svg><svg width="50" height="50"><rect width="50" height="50"></rect></svg><svg width="50" height="50"><rect width="50" height="50"></rect></svg><svg width="50" height="50"><rect width="50" height="50"></rect></svg>
</div>
</td>
</tr></table>
</div> <!-- .content -->
</div> <!-- .centered -->

Answer 1

This can be achieved if you add float: left to the svg(s) then overflow: hidden to the container (so the background shows), then finally, and the key to it all, add clear:both to the :nth-child(odd) selector to clear every 2nd svg from the float.
/* Stuff I've added to your CSS */
.svg-container {
overflow: hidden;
}
svg {
float: left;
}
svg:nth-child(odd) {
clear: left;
}
http://jsfiddle.net/eerLa/7/

Answer 2

EDIT
I just noticed your final result fiddle.
Option 1
Here's one option that feels pretty hacky: http://jsfiddle.net/P9pq7/7/
Change .svg-container to a span with no style. Add border: 1px solid orange; margin-top: -6px; to svg and margin-top: 0 to svg:first-child - works in FF, Chrome, and Safari
OR
Option 2 (better than option 1)
http://jsfiddle.net/eerLa/5/: Creates a table within your td using css
Use these styles:
.svg-container {
line-height:0;
display: table;
border-collapse: collapse;
}
svg {
display: table-cell;
border: 1px solid orange;
margin: 0;
padding: 0;
}
OR
Option 3 (if you don't like tables)
http://jsfiddle.net/P9pq7/10/
.svg-container {
line-height:0;
font-size: 0;
}
svg {
display: inline-block;
padding: 1px;
background: orange;
}
svg:nth-child(even) {
clear: right;
}
original answer
Without setting explicit width on the containing div or td, you can set clear: both; display: block on svg to do this: http://jsfiddle.net/P9pq7/4/