Wednesday, December 19, 2012

HTML table layout with div tag

http://coding.smashingmagazine.com/2009/04/08/from-table-hell-to-div-hell/
http://stackoverflow.com/questions/702181/replace-html-table-with-divs
http://www.htmlgoodies.com/beyond/css/web-development-case-study-upgrading-tables-to-divs.html
http://www.codeproject.com/Articles/47934/DIV-TABLE
http://www.brunildo.org/test/inline-block.html
http://jsfiddle.net/clairesuzy/bHMXw/

my code modified from stackoverflow above:


<style type="text/css">
div.block{
  overflow:hidden;
}
div.block label{
  width:160px;
  display:block;
  float:left;
  text-align:left;
}
div.block .input{
  float:left;
  width:150px;
}
div.block select{
  display:inline;
  width:150px;
}
div.separator
{
  display:inline;
  border:none;
  width:4px;
}
div.separator table{
  display:inline;
  border:none;
  margin-left:10px;
  margin-right:10px;
  vertical-align:middle;
}
div.rowdiv{
  display:table-row;
}
div.tablediv{
  display:inline;
  border:none;
  vertical-align:top;
}
</style>
<h1>My code</h1>
 
<div class="block">
  <label>First Name</label><div class="separator"></div>
    <input  id="txtFirstName"/>
&nbsp;</div><br />
<div class="block">
  <label>Last Name</label><div class="separator"></div>
    <input  id="txtLastName"/>
</div><br />

<div class="block">
    <label>New User?</label><div class="separator"></div>
    <div class="tablediv">
        <div class="rowdiv">
            <input type="radio" />&nbsp;Yes
        </div>
        <div class="rowdiv">
            <input type="radio" />&nbsp;No
        </div>
    </div>
</div><br />
<div class="block">
 
 
    <input type="submit" />
   
 
</div><br />


No comments:

SSL Error - The connection for this site is not secure

 After cloning a git repo of dot net framework website and trying to run it all I could see was this error Turns out the fix was to simply e...