Fix width div container when window resizes

Question

jamojo 0 Light Poster

12 Years Ago

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">&nbsp;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>

web-design

2 Contributors
1 Reply
141 Views
6 Days Discussion Span
Latest Post 12 Years Ago Latest Post by Skorpio07

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

Skorpio07 0 Newbie Poster · Answer 1 · 2011-07-14T01:34:27+00:00

well i think that this is just a css thing so try this:

create a css statement like this...

div.quarter {
    min-width:175px;
}

then apply that css to the div that surrounds the (surname-placeofbirth) and (sex-bloodtype) and (text-text) and (no-no). then save and test. you might have to change the min-width to a smaller or larger value. i did try to do a 25% for the min-width but it didn't work so go with the pixel setting.

there is an issue where your "text" div's coming under the 2nd column (sex-bloodtype), this may be by design, but it does move the columns as the window gets smaller.

let me know if this doesn't work for you