| listaction 2005-05-25, 4:37 am |
| 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=ADict.dtd">
<html>
<head>
<title>For Non-tabular matter</title>
<style type=3D"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=3D"HomeSearch" class=3D"equalboxes">
<div class=3D"HomeSearchD1"><span class=3D"FontSectionHead12Pt">Section
Heading</span></div>
<div class=3D"HomeSearchD2" align=3D"center"><span class=3D"Font10Pt"><a
href=3D"#">Link</a> | <a
href=3D"#">Link</a></span></div>
<div class=3D"HomeSearchLabel LabelFont" align=3D"right">Label 1:</div>
<div class=3D"HomeSearchField FieldFont" align=3D"left"> <input
type=3D"text"></div>
<div class=3D"HomeSearchLabel LabelFont" align=3D"right">Label 2:</div>
<div class=3D"HomeSearchField FieldFont" align=3D"left"> <Select>
<option selected>Any</option>
<option >Option Value</option>
<option >Option Value</option>
</select></div>
<div class=3D"HomeSearchLabel LabelFont" align=3D"right">Label 3:</div>
<div class=3D"HomeSearchField FieldFont" align=3D"left"> <select
name=3D"select6">
<option selected>Any</option>
<option >Option Value</option>
<option >Option Value</option> </select></div>
<div class=3D"HomeSearchLabel LabelFont" align=3D"right">Label 4:</div>
<div class=3D"HomeSearchField FieldFont" align=3D"left"> <select
name=3D"select3">
<option selected>Any</option>
<option >Option Value</option>
<option >Option Value</option>
</select></div>
<div class=3D"HomeSearchLabel LabelFont" align=3D"right">Label 5:</div>
<div class=3D"HomeSearchField FieldFont" align=3D"left"> <select
name=3D"select4">
<option selected>Any</option>
<option >Option Value</option>
<option >Option Value</option>
</select></div>
<div class=3D"HomeSearchLabel LabelFont" align=3D"right">Label 6:</div>
<div class=3D"HomeSearchField FieldFont" align=3D"left"> <select
name=3D"select8">
<option selected>Any</option>
<option >Option Value</option>
<option >Option Value</option>
</select></div>
<div class=3D"HomeSearchLabel LabelFont" align=3D"right"></div>
<div class=3D"HomeSearchField FieldFont" align=3D"left"><input
type=3D"submit" name=3D"Submit"
value=3D"Search"></div>
</div>
</div>
<div class=3D"equalboxes">test </div>
<div class=3D"equalboxes">test</div>=20
</body>=20
</html>
|