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"/>
</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" /> Yes
</div>
<div class="rowdiv">
<input type="radio" /> No
</div>
</div>
</div><br />
<div class="block">
<input type="submit" />
</div><br />
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"/>
</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" /> Yes
</div>
<div class="rowdiv">
<input type="radio" /> No
</div>
</div>
</div><br />
<div class="block">
<input type="submit" />
</div><br />
No comments:
Post a Comment