Form elements alignment through generic css

I'm trying to get a form horizontaly aligned, like it would be if I was using tables:

<form>
<table>
  <tr>
    <td style="width:30%"><label for="field1">Field1 Title:</label></td>
    <td><input type="text" id="field1" /></td>
  </tr>
  <tr>
    <td>Are you sure?</td>
    <td>
      <label for="sure_yes"> Yes </label><input type="radio" id="sure_yes" />&nbsp;
      <label for="sure_no"> No </label><input type="radio" id="sure_no" />
    </td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td><input type="submit" value="Confirm" /></td>
  </tr>
</table>
</form>

I can define the generic css as block- displayed like this:

form label{
display:block;
float:left;
width:200px;
margin:5px 0;
clear:left;
}
form input, form textarea, form select{
display:block;
margin:5px 0;
clear:right;
float:left;
}

And in this 开发者_开发技巧case my HTML would look like this:

<form>
  <label for="field1">Field1 Title:</label>
  <input type="text" id="field1" />
  Are you sure?
  <label for="sure_yes"> Yes </label><input type="radio" id="sure_yes" />&nbsp;
  <label for="sure_no"> No </label><input type="radio" id="sure_no" />
  <input type="submit" value="Confirm" />
</form>

But of course this system won't work for my way of displaying radios and submit. I can fix this with a javascript function, but I wonder if there would be a pure css solution - and cross-browsers.

The solution is here: http://jsfiddle.net/gS86P/

The problem you had was you were trying to float the items. Instead I used inline-block and a row div to make them act similarly to a table, each row of the table in a separate row div.

You can test this:

<form style="width:300px">
  <label for="field1" style="margin-right:20px;">Field1 Title:</label>
  <input type="text" id="field1" style="width:150px"/>
  <textarea style="border:none;background:none;color: #000000;font-size: 15px;resize: none;text-align: left;vertical-align: middle;font-family:'serif';max-width:60px; max-height:50px; overflow-y:hidden" disabled="disabled">Are you sure?</textarea>
  <label for="sure_yes" style="margin-top:12px;margin-left:35px" > Yes </label>
  <input type="radio" id="sure_yes" style="margin-top:17px" />
  <label for="sure_no" style="margin-top:12px" > No </label>
  <input type="radio" id="sure_no" style="margin-top:17px"  />
  <input type="submit" value="Confirm" style="margin-left:100px;"/>
</form>

Here I tried to do the job using only form element and css, though I am also novice to web programming.

Here is the solution I used in the end:

CSS

.appui-form-label{
  display:block !important;
  margin:0.3em 2em 0.3em 0;
  padding-right: 60px;
  float:left !important;
  clear:left !important;
  vertical-align:top;
  position:relative;
  min-height:1.5em;
  white-space:nowrap;
  width: 200px;
}
.appui-form-field{
  display:block !important;
  margin:0.3em 0;
  float:left !important;
  clear:right !important;
  vertical-align:top;
  position:relative;
  width: 500px;
}
.appui-elem-hidden{
  display:none !important;
}

Javascript

(function($){
  $.fn.redraw = function(options){
    return this.each(function(){
      var ele = this,
        w = 0,
        center,
        total,
        cont,
        space,
        $lbl,
        $fld,
        $hiddenEle,
        $fieldsets = $("form", ele),
        $hiddenChildren = {};
      if ( $fieldsets.length > 0 ){
        $fieldsets.each(function(i){
          center = false, $hiddenEle = false, cont = this, $fieldset = $(this);
          $hiddenChildren = $hiddenChildren ?
            $fieldset.children(".appui-elem-hidden").removeClass("appui-elem-hidden") : 
            $hiddenChildren.add($fieldset.children(".appui-elem-hidden").removeClass("appui-elem-hidden"));

          $(".appui-form-label",cont).each(function(){
            $lbl = $(this);
            if ( $lbl.parents(":hidden").length > 0 ){
              $hiddenEle = $hiddenEle ? $hiddenEle.add($lbl.parents(":hidden").show()) : $lbl.parents(":hidden").show();
            }
            $lbl.css("width","auto");
            if ( $lbl.hasClass("appui-c") ){
              center = 1;
            }
            var w2 = $lbl.width();
            if ( w2 > w ){
              w = w2;
            }
            if ( !space ){
              $fld = $lbl.nextAll(".appui-form-field").first();
              space = ( $lbl.outerWidth(true) - $lbl.width() ) + ( $fld.outerWidth(true) - $fld.width() );
            }
          });
        });
        if ( w > 0 ){

          total = false;
          for ( var $par = $lbl.parent(); !total; $par = $par.parent() ){
            total = $par.width();
            if ( $par.width() < total ){
              total = $par.width();
            }
          }

          if ( total > 0 ){
            total -= ( 20 + space );
            if ( center ){
              var w1 = Math.round(total/2);
              w = w1;
            }
            else{
              var w1 = total - w;
            }
            $fieldsets.each(function(i){
              cont = this, $fieldset = $(this);
                $(".appui-form-label",cont).each(function(){
                  var $l = $(this);
                  $l.width(w);
                  if ( center ){
                    $l.css("text-align","right");
                  }
                  if ( $l.parent().prop("tagName").toLowerCase() === 'a' ){
                    $l = $l.parent();
                  }
                  var $f = $l.nextAll(".appui-form-field").first();
                  if ( $f.length === 0 ){
                    $f = $l.nextAll("a:first").find(".appui-form-field");
                  }
                  if ( $f.length === 0 ){
                    appui.f.log('Unable to find a corresponding field (' + $l.text() + ')');
                  }
                  else{
                    var t = $f.prop("tagName");
                    if ( t.toLowerCase() === 'div' || t.toLowerCase() === 'textarea' ){
                      $f.css("width",w1+"px");
                    }
                    else{
                      $f.css("max-width",w1+"px");
                    }
                  }
                });
            });
          }
          $hiddenChildren.addClass("appui-elem-hidden");
          if ( $hiddenEle ){
            $hiddenEle.hide();
          }
        }
      }
    });
  };
})(jQuery);