I’m trying to create a 2 column layout with header a footer where the two columns have equal height. I’ve used the One True Method in the past (large padding and equal negative margin), but that doesn’t allow for a border radius to be applied. There is a 14px gutter between the two columns and a 15px border-radius applied on all corners.
Any idea how I can keep the columns equal height while retaining the border-radius?
The CSS:
#container { margin: 50px auto; width: 975px; height: auto; background: #fbfeed; -moz-border-radius: 15px; -webkit-border-radius: 15px; border-radius: 15px; }
header { padding-top: 13px }
#wrapper { overflow: hidden; }
#sidebar { float: left; width: 283px; margin: 0 14px; background: #c8de83; -moz-border-radius: 15px; -webkit-border-radius: 15px; border-radius: 15px; }
#main { float: left; width: 651px; background: #eff4aa; -moz-border-radius: 15px; -webkit-border-radius: 15px; border-radius: 15px; }
The HTML:
Thanks,
Matt
