CSS to Replace Table Layout for Forms
- by Erick
I've looked at other questions and am unable to find the solution to this. Consider this image:
I want to wrap divs and stack them vertically. The GREEN div would be a wrapper on a line. The BLUE div would contain an html label and maybe icon for a tooltip. The ORANGE div would contain some sort of entry (input, select, textarea).
Several of these would be stacked vertically to make up a form. I am doing this now, but I have to specify a height for the container div and that really needs to change depending on the content - considering any entry could land there. Images and other stuff could land here, as well.
I have a width set on the BLUE div and the ORANGE is float:left. How can I get rid of the height on divs and let that be determined by content? Is there a better way? Changing all to something else would be difficult and would prefer a way to style all elements or something.
The code I'm using is like:
<div class=EntLine>
<div class=EntLbl>
<label for="Name">Name</label>
</div>
<div class=EntFld>
<input type=text id="Name" />
</div>
</div>
The CSS looks like:
.EntLine {
height: 20px;
position: relative;
margin-top: 2px;
text-align: left;
white-space: nowrap;
}
.EntLbl {
float: left;
width: 120px;
padding: 3px 0px 0px 3px;
min-width: 120px;
max-width: 120px;
vertical-align: text-top;
}
.EntFld {
float: left;
height: 20px;
padding: 0px;
width: 200px;
}
Thanks!
