Hello Everyone,
Below is the html page I created where there is a div container. In the div container, there are 4 divs with textboxes. The div container with is 100%. But when I resize the browser, the 4 divs overlapses. What would I like to do is to have a left-right scroller in the web browser to maintain the div container.
Can you please give me some advice on this? Please review the html
Thanks in advance.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title></title>
<style type="text/css">
body,td,th {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
}
body {
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
size:landscape;
}
.table_wrapper_content {
border: 1px #FFFFFF solid;
margin-top:5px;
margin-bottom:5px;
}
.table_wrapper {
border: 1px #666666 solid;
margin-top:5px;
margin-bottom:5px;
}
.table_wrapper_header {
border-bottom:solid #666666 1px;
background:#666666;
color:#FFFFFF;
font-weight:bold;
}
div.row {
clear: both; width:100%;
}
.label {
float: left; margin: 0px 5px 5px 0px; width: 120px; height: auto; text-align: right;
}
.form_object {
display: block; float: left; margin: 0px 0px 2px 5px; width: auto; height: auto;
}
/*.tab_container {
border: 1px solid #999;
border-top: none;
overflow: hidden;
clear: both;
float: left;
width:99.95%;
background: #fff;
}
.tab_content {
padding: 5px;
}*/
#container{
width:100%;height:100%;
}
</style>
</head>
<body>
<div id="container"><!--begin container--><!--end hdr--><!--end btn_holder-->
<div id="content_wrapper"><!--start content_wrapper-->
<div class="tab_container" id="tab_container"><!--start tab_container-->
<div id="tab2" class="tab_content"><!--start tab2-->
<form id="form_person" name="form_person" method="post" action="">
<div id="person_content" class="table_wrapper"><!--table_wrapper-->
<div id="person_content_header" class="table_wrapper_header"> Personal Data Information</div>
<div style="padding:0px;"><!--padding 5px-->
<div id="person_content_0">
<div id="person_content_0_0" style="float:left; vertical-align:top;width:25%">
<div class="row"><label for="surname_0_0_1" class="label" >Surname</label><span class="form_object"><input name="surname_0_0_1" id="surname_0_0_1" title="de Asis" type="text" value="Surname" class="input_varchar required"/>
</span></div>
<div class="row"><label for="firstname_0_0_2" class="label" >First Name</label>
<span class="form_object"><input name="firstname_0_0_2" id="firstname_0_0_2" type="text" value="First Name" class="input_varchar required"/>
</span></div>
<div class="row"><label for="middlename_0_0_3" class="label" >Middle Name</label>
<span class="form_object"><input name="middlename_0_0_3" id="middlename_0_0_3" type="text" value="Middle Name" class="input_varchar required"/>
</span></div>
<div class="row"><label for="extname_0_0_4" class="label" >Name Extension</label><span class="form_object"><input name="extname_0_0_4" id="extname_0_0_4" title="" type="text" value="" class="input_varchar"/></span></div>
<div class="row"><label for="birthdate_0_0_5" class="label" >Date of Birth</label><span class="form_object"><input name="birthdate_0_0_5" id="birthdate_0_0_5" type="text" value="0000-00-00" class="input_date"/></span></div>
<div class="row"><label for="birthplace_0_0_6" class="label" >Place of Birth</label><span class="form_object"><input name="birthplace_0_0_6" id="birthplace_0_0_6" type="text" value="" class="input_varchar"/></span></div>
</div>
<div id="person_content_0_1" style="float:left; vertical-align:top;width:25%">
<div class="row"><label for="sex_0_1_1" class="label" >Sex</label><span class="form_object"><select name="sex_0_1_1" id="sex_0_1_1" title="Male"><option value = "">Select Sex</option><option value = "Male" selected="selected" >Male</option><option value = "Female">Female</option></select></span></div>
<div class="row"><label for="height_0_1_2" class="label" >Height (m)</label><span class="form_object"><input name="height_0_1_2" id="height_0_1_2" title="0" type="text" value="0" class="input_number"/></span></div>
<div class="row"><label for="weight_0_1_3" class="label" >Weight (kg)</label><span class="form_object"><input name="weight_0_1_3" id="weight_0_1_3" title="0" type="text" value="0" class="input_number"/></span></div>
<div class="row"><label for="bloodtype_0_1_4" class="label" >Blood Type</label><span class="form_object"><select name="bloodtype_0_1_4" id="bloodtype_0_1_4" title="B"><option value = "">Select Blood Type</option><option value = "A">A</option><option value = "B" selected="selected" >B</option><option value = "AB">AB</option><option value = "O">O</option></select></span></div>
</div>
<div id="person_content_0_2" style="float:left; vertical-align:top;width:25%">
<div class="row"><label for="num_0_2_1" class="label" >No.</label>
<span class="form_object"><input name="num_0_2_1" id="num_0_2_1" type="text" value="" class="input_varchar"/>
</span></div>
<div class="row"><label for="num_0_2_2" class="label" >No.</label>
<span class="form_object"><input name="num_0_2_2" id="num_0_2_2" type="text" value="" class="input_varchar"/>
</span></div>
<div class="row"><label for="num_0_2_3" class="label" >No.</label>
<span class="form_object"><input name="num_0_2_3" id="num_0_2_3" type="text" value="" class="input_varchar"/>
</span></div>
<div class="row"><label for="num_0_2_4" class="label" >No.</label>
<span class="form_object"><input name="num_0_2_4" id="num_0_2_4" type="text" value="" class="input_varchar"/>
</span></div>
</div>
<div id="person_content_0_3" style="float:left; vertical-align:top;width:25%">
<div class="row">
<label for="num_0_3_1" class="label" >Text</label>
<span class="form_object"><input name="num_0_3_1" id="num_0_3_1" type="text" value="" class="input_varchar"/>
</span></div>
<div class="row">
<label for="num_0_3_2" class="label" >Text</label>
<span class="form_object"><input name="num_0_3_2" id="num_0_3_2" type="text" value="" class="input_varchar"/>
</span></div>
<div class="row">
<label for="num_0_3_3" class="label" >Text</label>
<span class="form_object"><input name="num_0_3_3" id="num_0_3_3" type="text" value="0000-00-00" class="input_date"/>
</span></div>
<div class="row">
<label for="num_0_3_4" class="label" >Text</label>
<span class="form_object"><input name="num_0_3_4" id="num_0_3_4" type="text" value="0000-00-00" class="input_date"/>
</span></div>
</div>
</div>
</div><!--end padding 5px-->
<div style="clear: both;"></div>
</div><!--end table_wrapper-->
</form>
</div><!--end tab2-->
</div><!--end tab_container-->
</div><!--end content_wrapper-->
</div><!--en container-->
</body>
</html>