Can it be done?
I've been playing around for a bit now. I've tried using the One True
Layout, but that cuts off the bottom, and would require some extra,
ugly markup, which we want to avoid.
I've tried display:table, but that forces me to have an extra thick
border between the two columns. If I set border-collapse:collapse,
then the border-radius goes away. I tried using a negative margin, but
that didn't work. Doing a border-left:none, makes part of the rounded
corner go away.
Here's the HTML and CSS for the section.
<div id="info_blocks">
<div>
<h3>Group #: 3322589</h3>
<span>Moo</span>
</div>
<div>
<span>Moo</span>
</div>
</div>
#info_blocks {
display:table;
margin:6px 0 0;
}
#info_blocks div {
border:1px solid #d8d8d8;
border-radius:5px;
-moz-border-radius:5px;
-webkit-border-radius:5px;
display:table-cell;
padding:10px;
}
#info_blocks div:first-child {
background:#fff9e7;
margin:0 -10px 0 0;
width:533px;
}
#info_blocks div:last-child {
background:#fff8d0;
width:169px;
}
--
Marc Luzietti
absynthe minded web smithes
http://www.absynthe.us/
954.496.0162
______________________________________________________________________
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
