Equal height columns rounded help
Permalink
Hi, Im currently creating my first website in which Im creating my own theme for. I am trying to get 2 columns of different widths with equal height with rounded corners. I have used curvycorners.js in order to create the rounded corners and have used source code from herehttp://abcoder.com/wp-content/uploads/2009/09/css-equal-height-thre... to create equal height but with this method only the top corners are rounded due to the padding in this method.
Here is a link to my site.
http://madisonbusinesssolutions.co.uk/...
Is there a way to get the bottom corners rounded or is there a different method of getting equal height columns I could use.
Is there a free c5 theme which uses equal height columns with rounded corners I could use code from?
Thanks for reading, I hope you can help.
Jack
Here is a link to my site.
http://madisonbusinesssolutions.co.uk/...
Is there a way to get the bottom corners rounded or is there a different method of getting equal height columns I could use.
Is there a free c5 theme which uses equal height columns with rounded corners I could use code from?
Thanks for reading, I hope you can help.
Jack
Look athttp://matthewjamestaylor.com/blog/equal-height-columns-cross-brows... for equal height columns.
Thanks. I have now sorted the problem. Im now using the css3 selectors for all browsers except for ie where im using curvycorners.js, am I right in believing that by containing the js within <!--[if IE]>
<![endif]--> that the script will not be loaded in any browser other than IE thus only affecting IE load times?
Thanks Jack
<![endif]--> that the script will not be loaded in any browser other than IE thus only affecting IE load times?
Thanks Jack
You say you want rounded corners of the bottom of the divs, but the corners are indeed rounded (I'm viewing it in Safari 5, I've attached a screenshot).
When it comes to rounded corners I usually don't look to any jQuery plugins or such anymore. I simply use the CSS3 selectors. Something like this:
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
The only browser that won't work in is IE. But in IE's case I let those users stick with straight corners. The design will still degrade gracefully and for me IE's lack of CSS3 support for one property doesn't justify including a whole jQuery plugin. Again, that's just me. Your situation may be different.
As for the equal height technique:
I may do something different. To me, 9000px margin & padding seems like overkill. I haven't tried to do this specifically myself, but I would think something like this would work:
#your-wrapping-block {
display: block;
}
.your-inner-columns {
float: left;
height: 100%;
}
Your style may need more to make it look right, but toying with 100% height for the inner columns within a wrapping div might be the right thing.
All this aside, it seems the layout is somewhat broken. I would guess this curvycorners.js interacting with your equal height layout.