Hello All,
I'm trying to avoid use of tables for layout purposes. So I have the
layout positioned using css and <div>. When the browser window is
resized by clicking & dragging the mouse, the text doesn't transform
gracefully as it would if I were to use tables for layout.
Any way to fix this, and continue to use DIV or is the only way to go
back to tables?
Browsers used: Internet Explorer and Firefox
HTML CODE:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/str*ict.dtd">
<html>
<head>
<title>For Non-tabular matter</title>
<style type="text/css">
..equalboxes {border:1px solid #31659C;width:46%;float:left; margin:
2px; background-color:#F2F8FD}
..HomeSearchD1 {border:0px solid black;width:30%;float:left;
height:21px; margin-left: 0 px; margin-top: 2px;
background-color:#FFFFFF;display:block;}
..HomeSearchD2 {border:0px solid black;width:70%;float:left;
height:21px; margin-left: 0 px; margin-top: 2px;
background-color:#FFFFFF;display:block;}
..FontSectionHead12Pt
{font-family:Arial;font-size:12pt;font-weight:bold;}
..Font10Pt {font-family:Arial;font-size:10pt;}
..FieldFont {font-family:Verdana;font-size:10pt;}
..LabelFont {font-family:Verdana;font-size:10pt;}
..HomeSearchLabel {border:0px solid black;width:36%;float:left;
margin-top: 3px; margin-left: 0 px; display:block;}
..HomeSearchField {border:0px solid black;width:63%;float:left;
margin-left: 0 px; margin-top: 5px;
margin-left:3px;display:block;}
..equalboxes2 {border-top:1px solid black; border-bottom: 1px solid
black; width:33%;float:left;}
..tableInline{display:table; width:100%; border: 1px solid green; }
..tableRow{display:table-row;}
..tableCell{display:table-cell; border: 1px solid green; }
</style>
</head>
<body>
<div id="HomeSearch" class="equalboxes">
<div class="HomeSearchD1"><span class="FontSectionHead12Pt">Section
Heading</span></div>
<div class="HomeSearchD2" align="center"><span class="Font10Pt"><a
href="#">Link</a> | <a
href="#">Link</a></span></div>
<div class="HomeSearchLabel LabelFont" align="right">Label 1:</div>
<div class="HomeSearchField FieldFont" align="left"> <input
type="text"></div>
<div class="HomeSearchLabel LabelFont" align="right">Label 2:</div>
<div class="HomeSearchField FieldFont" align="left"> <Select>
<option selected>Any</option>
<option >Option Value</option>
<option >Option Value</option>
</select></div>
<div class="HomeSearchLabel LabelFont" align="right">Label 3:</div>
<div class="HomeSearchField FieldFont" align="left"> <select
name="select6">
<option selected>Any</option>
<option >Option Value</option>
<option >Option Value</option> </select></div>
<div class="HomeSearchLabel LabelFont" align="right">Label 4:</div>
<div class="HomeSearchField FieldFont" align="left"> <select
name="select3">
<option selected>Any</option>
<option >Option Value</option>
<option >Option Value</option>
</select></div>
<div class="HomeSearchLabel LabelFont" align="right">Label 5:</div>
<div class="HomeSearchField FieldFont" align="left"> <select
name="select4">
<option selected>Any</option>
<option >Option Value</option>
<option >Option Value</option>
</select></div>
<div class="HomeSearchLabel LabelFont" align="right">Label 6:</div>
<div class="HomeSearchField FieldFont" align="left"> <select
name="select8">
<option selected>Any</option>
<option >Option Value</option>
<option >Option Value</option>
</select></div>
<div class="HomeSearchLabel LabelFont" align="right"></div>
<div class="HomeSearchField FieldFont" align="left"><input
type="submit" name="Submit"
value="Search"></div>
</div>
</div>
<div class="equalboxes">test </div>
<div class="equalboxes">test</div>
</body>
</html>
