Use DIVs to layout grid form controls in ASP.Net
It is interesting that people tend to usie tables to layout contents in a Page, or controls in ASP page. Because this may be one of the easiest way to do the layout job quick. However to restruct the layout is always a headache.
I guess in ASP.net the most typical page layout is form, it consists of labels controls, textboxes, dropdown boxes, and sometimes datagrids etc. I prefer to use DIV blocks to control layouts instead of table.
I use the stylesheet to class the div tags, an example is below:
in file:mycss.css
DIV.base-layer {
background: none ; border:
margin: 0.5em 12px 0.5em 12px; padding: 0; text-align: center; width: 80%;}
DIV.table-row {
border:1px;
margin-top: 0; margin-right: auto; margin-bottom: 0; margin-left: auto;}
DIV.left-cell41 {
border: none; float: left;border: thin solid red 1px; margin: 0; padding: 0; width: 20%;}
DIV.left-cell42 {
border: none; float: left;border: thin solid blue 1px; margin: 0; padding: 0; width: 30%;}
DIV.left-cell43 {
border: none; float: left;border: thin solid green 1px; margin: 0; padding: 0; width: 20%;
overflow:visible;}
DIV.left-cell44 {
border: none; float: left;border: thin solid yellow 1px; margin: 0; padding: 0; width: 29%;
visibility:visible;
overflow:visible;}
in mysample.html (or you can put that in aspx)
<html> <head> <style type=”text/css”>@import url(mycss.css);</style> </head> <body> <div class=”base-layer”> <div class=”table-row” > <div class=”left-cell41″>cell1</div> <div class=”left-cell42″>cell2</div> <div class=”left-cell43″>cell3</div> <div class=”left-cell44″>Last cell</div> </div> </div> </body> </html>
However there is still a problem with overflowing, when the text in the cell is over the size of the cell, the text draws outside the box.
I am still doing research to seek for solution
