Question

This problem has been bothering me for sometime now, I have not settled on a solution and have tried several approaches. I am trying to keep my markup semantic as possible. I have searched for similar questions, but I am having trouble abstracting my problem enough to find an applicable solution.

I feel a quick about me is in order to explain my design approach. For starters, I am not a designer. I have no formal training, but have managed to find myself employed as a Programmer. I have dabbled with work on the web since I was 11 (1997) and was deeply influenced by the Web Standards movement in high school (2000-2004). And up until a few months ago, have not thought about web work since. The company I work for had paid a designer to develop a design, in photoshop, and was about to pay another person to do the CSS work. This confounded me to no end, and I decided to step up and take a shot at the work, and so far so good.

However, I have let a nagging problem slip by. we have a search form that has been designed as a 3 column box. Due to the nature of my work, I have had to abstract the box a bit. the box renders correctly in webkit, but the center column will not stay positioned correctly in firefox, opera, and especially, IE (not pictured). It looks worse in older versions of these browsers. This may be a good time to checkout a live example: http://jsfiddle.net/KdFT7/

I should briefly explain some of the markup. When one clicks on the button ‘add X’ a modal window appears with choices to select X Items, this will be appended to the div with the class XChoice and the total selected with is appended to the paragraph (<p>) with the class XSelected below. Ideally it would be nice for the box to start small and grow as items are added, but this causes issues for me in how to update the center column and the box for AddY. overall I am unhappy with the design, but my job is to code it not critique it.

I need a fresh set of eyes. How do I mark this up, and apply the correct styles that allow the 3 columns to sit flush across most browsers. I understand this a lot to digest, but I greatly appreciate any stab at the problem. The markup can change, the css can be retooled, but unfortunately, the design needs to be the same.

HTML

<div class="rightCol">

    <div class="addX">
        <h2><span class="tiny">Add</span>X</h2>
        <span class="ui-corner-tl ui-widget-header ui-widget-borderfix"></span>
        <div class="innerContent ui-padding-med ui-widget-content">
            <form>
                <input type="radio" id="radio-0" name="radio" checked="checked" /><label for="radio-0" class="ui-spacer-med">And</label>
                <input type="radio" id="radio-1" name="radio" /><label for="radio-1" class="ui-spacer-med">Or</label><br />
            </form>
            <p class="descrip ui-spacer-med"> Click the button to lookup and select X for your search </p>
            <div class="XChoice"></div>
            <p class="xSelected"></p>
            <!-- brings up modal form -->
            <a href="addX.htm" class="addXButton">Add X</a>        </div>
        <span class="ui-corner-bl ui-widget-header ui-widget-borderfix"></span>
    </div>

    <div class="centerCol">
        <span class="ui-widget-header ui-widget-borderfix"></span>            
        <form class="clause ui-widget-content ui-padding-med">
            <input type="radio" id="radio-2" name="radio" checked="checked" /><label for="radio-2">And</label><br />
            <input type="radio" id="radio-3" name="radio" /><label for="radio-3">Or</label><br />
            <input type="radio" id="radio-4" name="radio" /><label for="radio-4">Not</label><br />
        </form>
        <span class="ui-widget-header ui-widget-borderfix"></span>
    </div>

    <div class="addY">
        <h2><span class="tiny">Add</span>Y</h2>
        <span class="ui-corner-tr ui-widget-header ui-widget-borderfix"></span>
        <div class="innerContent ui-padding-med ui-widget-content">
            <form>
                <input type="radio" id="radio-5" name="radio" checked="checked" /><label for="radio-5" class="ui-spacer-med">And</label>
                <input type="radio" id="radio-6" name="radio" /><label for="radio-6" class="ui-spacer-med">Or</label><br />
                <input type="input" value="Enter Y(s)" /><br />
            </form>
            <a href="#" id="example">example</a>
            <ol>
                <li> We should find an example to put here?</li>
                <li> Examples? </li>
                <li> Yes, perhaps 3 solid examples </li>
            </ol>
        </div>
        <span class="ui-corner-br ui-widget-header ui-widget-borderfix"></span>
    </div>
    <div class="addSubGroup ui-corner-all ui-widget-content">
        <a class="rg ui-icon ui-icon-circle-minus" title="Remove Sub Group">Remove Sub Group</a> <a class="ag ui-icon ui-icon-circle-plus" title="Add Sub Group">Add Sub Group</a>
    </div>
    <span class="sub-clause">
        <form class="ui-corner-all  ui-widget-content">
            <input type="radio" id="radio-7" name="radio" checked="checked" class="ui-spacer-med" /><label for="radio-7">And</label>
            <input type="radio" id="radio-8" name="radio" class="ui-spacer-med" /><label for="radio-8">Or</label>
            <input type="radio" id="radio-9" name="radio" class="ui-spacer-med" /><label for="radio-9">Not</label>
        </form>
    </span>
</div>

CSS

* { margin: 0; padding: 0; zoom: 0; }
body, html {font: .9em/1.1em HelveticaNeue, Helvetica, Arial, sans-serif;}


.addY,
.addX{ float: left; max-width: 370px; min-width: 218px; width: 43%; }
.addSubGroup { float: left; margin: -1em 0 0 80%;   padding: .25em .5em;    width: 2.5em; }
.ag, 
.rg { float: left;}

.centerCol { float: left; margin-top: 3.05em; max-width: 66px; min-width: 46px; }
.clause { border-left: 1px solid #fff; border-right: 1px solid #fff;    height: 210px;  margin: 0 auto; }

#example { margin-left: 1em; }
#example+ol { display: none; line-height: 1.5em; margin-left: 2.5em; }
.rightCol { float: right; height: 350px; margin: -1em 1% 2%; width: 73%; }
.sub-clause { display: none; float: left; margin: 2% 0 1% 5%;   text-align: center; width: 80%; }
.ui-widget-borderfix { display: inherit; height: 1.25em; }
h2 { color: #222; font: 2.2em/1em Georgia, serif; }
.rightCol h2 { margin: .5em 0 -.25em .45em; }
.innerContent { height: 210px; }
.ui-widget-content { background: #eee; color: #000000; }
.ui-widget { font-family: Arial,sans-serif; font-size: .8em; }
.ui-padding-med { padding: .5em; }
.tiny { font-size: .65em }

again a live example can be found here: http://jsfiddle.net/KdFT7/

PS.

Bonus, this question is related to another I had asked that has received no solid answers:
Clone and update attributes

Answer 1

I’ve only tested this in Chrome, Firefox and IE8, but it appears to have helped..

Summary:
I removed the h2’s from the flow by absolutely positioning them, this then removed the height differences caused by them.. to do this:

make addX, addY {position: relative;} so the positioned h2‘s stay relative to them

add an equal top margin to addX, addY and centerCol (enough to put the headings up into) and the whole thing clears whatever it needs to

add position: absolute the the h2‘s and remove all margin and padding from them, then give them a negative top value to pop them up onto the top of your boxes.

side effect: .ui-widget-content also needs position: relative; added to it to bring back on top on the positioned addX, and addY divs

Working Example