Page displays in odd way

Something is messed uo with my <div>...........</div> pairs, or something else. Here is the code:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<title>Lakos IND Configurator - Select Flow Rate</title>
 <style>
.nopadding {
   padding: 0 !important;
   margin: 0 !important;
}
.wrapper{
  max-width:1100px;
min-width:900px;
  margin:0 auto;
  
}
</style> 
<script type="text/javascript">
ac = "";
function chk_vals() {
		if (ac == "b") {
			document.st.action = "applinfo.php";
			document.st.submit();
		}	
		if (! isnumeric(document.st.flow.value)) {
			alert("Flow Rate must be numeric.");
			return false;
		}
		if (document.st.flow.value < 4) {
			alert("Flow rate too small. 4 GPM minimum.")
			return false;
		}	
		if (document.st.flow.value > 12750) {
			alert("Flow rate too large. 12,750 GPM maximum.")
			return false;
		}
		return true;
	}
	function isdigit(test) {
		if (test == "0" || test == "1" || test == "2" ||
	    	test == "3" || test == "4" || test == "5" ||
	    	test == "6" || test == "7" || test == "8" ||
	    	test == "9" || test == ",")
			return true;
		else {
			return false;
	     }
	}
// Function to determine if a field is numeric
	function isnumeric(field) {
		len = field.length;
		for (i = 0; i < len; i++)
			if (isdigit(field.charAt(i)) == false) {
				return false;
			}
		return true;
	}	
	function prof_window() {
	window.open("profile.php", "profile", "width=1000, height=600, left=800, top=300, scrollbars=yes, menubar=yes, resizable=yes");
		return false;
	}	
</script>	
<!-- Global site tag (gtag.js) - Google
Analytics -->

<script async
src="https://www.googletagmanager.com
/gtag/js?id=UA-96994211-3"></script>

<script>
window.dataLayer = window.dataLayer
|| [];
function
gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'UA-96994211-3');
</script>
</head>
<body>
<div class="wrapper">
<form method="post" name="st" action="microns_choice.php" onSubmit = "return chk_vals();">
<input type="hidden" name="hvtype">
<div class="container-fluid" >
<script>
	page = location.pathname.substring(1);
	pq = page.indexOf("?");
	if (pq != -1) {
		page = page.substr(0,pq);
	}
	if (page.substr(0,4) == "dev/") {
		ln = page.length;
		page = page.substr(4,ln-4);
	}	
	function chk_link_msg() {
		ok = false;
		if (page == "projects.php" || page == "main.php" || page == "summary.php") {
			ok = true;
		}		
		if (! ok) {
			jj = confirm("Going to My Projects will loose the current configuration. OK?");
			if (!jj) {
				return false;
			}
		}
		return true;
	}
</script>	
<div class="row hidden-xs">
<div class="col-sm-4 col-xs-4"><a href = "http://www.lakos.com/hvac.htm" border="0" target="_blank"><img src="images/logo.jpg" class="img-responsive"></a></div>
<div class="col-sm-1 col-xs-1 text-center" style="color:#0C63A9;"><a href="main.php"><h4>Home</h4></a></div>
<div class="col-sm-2 col-xs-2 text-center" style="color:#0C63A9;"><a href="projects.php" onClick="return chk_link_msg();"><h4>My Projects</h4></a></div>
<div class="col-sm-2 col-xs-2 text-center" style="color:#0C63A9;"><a href="http://www.lakos.com/About/contact-us" target="blank"><h4>Contact LAKOS</h4></a></div>
<div class="col-sm-2 col-xs-2 text-center" style="color:#0C63A9;"><a href="profile.php" onClick="return prof_window();"><h4>Profile</h4></a></div> 
<div class="col-sm-1 col-xs-1 text-center" style="color:#0C63A9;"><a href="logout.php"><h4>Logout</h4></a></div>
</div>
<div class="row visible-xs">
<div class="col-sm-4 col-xs-4"><a href = "http://www.lakos.com/hvac.htm" border="0" target="_blank"><img src="images/logo_sm.jpg" ></a></div>
<div class="col-sm-2 col-xs-2 text-center" style="color:#0C63A9;"><a href="main.php"><h5>Home</h5></a></div>
<div class="col-sm-2 col-xs-2 text-center" style="color:#0C63A9;"><a href="http://www.lakos.com/About/contact-us" target="blank"><h5>Contact LAKOS</h5></a></div>
<div class="col-sm-2 col-xs-2 text-center" style="color:#0C63A9;"><a href="profile.php" onClick="return prof_window();"><h5>Profile</h5></a></div> 
<div class="col-sm-2 col-xs-2 text-center" style="color:#0C63A9;"><a href="logout.php"><h5>Logout</h5></a></div>
</div><div class="row">
	<div class="col-sm-12 col-xs-12" style="padding-top:3px;">&nbsp;</div>
</div>
<div class="row">
	<div class="col-sm-12 col-xs-12 text-center" style="padding-top:2px; padding-bottom:2px; background-color:#0A2F98; color: white; font-size:20px"><b>IND Product Configurator</b></div>
</div>
<div class="row hidden-xs">
	<div class="col-sm-1 col-xs-1 text-right">&nbsp;</div>
	<div class="col-sm-11 col-xs-11" style="padding-top:10px; padding-bottom:20px; padding-left:50px; font-size:20px"><b>Select Flow Rate:</b></div>
</div>
<div class="row visible-xs">
	<div class="col-sm-1 col-xs-1 text-right">&nbsp;</div>
	<div class="col-sm-10 col-xs-10" style="padding-top:10px; padding-bottom:20px; padding-left:50px; font-size:20px"><b>Select Flow Rate:</b></div>
</div>
<div class="row">
	<div class="col-sm-1 col-xs-1">&nbsp;</div>
	<div class="col-sm-3 col-xs-3 text-right" style="font-size:20px;">Enter Flow Rate:</div>
	<div class="col-sm-3 col-xs-3" style="font-size:20px;"><input type="text" name="flow" maxlength="6" style="width:80px;" value=""><div>
	<div class="col-sm-5 col-xs-5" style="font-size:20px;">4 US GPM to 12,750 US GPM</div><br><br>	
</div>
<div class="row">
	<div class="col-sm-6 col-xs-6" style="padding-top:10px;">&nbsp;</div>
</div>	
<map name="nav">
	<area shape="circle" coords="20,20,20" href="#">
</map> 	
<div class="row hidden-xs">
	<div class="col-sm-12 col-xs-12 text-center nopadding"><span style="padding-right:30px;"><input type="image" src="images/back.jpg" style="vertical-align:bottom;" onMousedown="ac='b';"></span><img src="images/nav_left_7_onrrr.png"><img src="images/nav_right_7_rrr.png"><span style="padding-left:30px;"><input type="image" src="images/next.jpg" style="vertical-align:bottom;"></span></div>
</div>
<div class="row visible-xs">
	<div class="col-xs-12 text-center"><span style="padding-right:200px;"><input type="image" src="images/back.jpg" onMousedown="ac='b';"></span><span style="padding-left:10px;"><input type="image" src="images/next.jpg"></span></div>
</div>
<div class="row hidden-xs">
	<div class="col-sm-12 col-xs-12 text-center nowrap"><img src="images/nav_ind_left_cook.png"><img src="images/nav_ind_right.png"></div>
</div>

<div class="row">
	<div class="col-sm-10 col-xs-10" style="padding-top:4px;">&nbsp;</div>
</div>
<div class="row">
	<div class="col-sm-12 col-xs-12" style="font-size:15px;">Please email any questions, comments, or feedback to <a href="mailto:lit@lakos.com">lit@lakos.com</a></div>
</div>
<div class="row">
	<div class="col-sm-10 col-xs-10" style="padding-top:4px;">&nbsp;</div>
</div>	
<br><br>	
</div>
</form>
</div>
</body>
</html>

Open in new window


This code produces the attached result.

Obviously, I don't want that, I want the text 4 US GPM to 12,750 US GPM to be in a div right after (on the same line) as the input test box. Then everything below is screwed up too. It's like HTML thinks I'm only using a narrow part of the middle of the page.

Can someone look at the HTML & tel me what's wrong? My guess is unmatched <div>'s, but I can't find them
flow_rate_page.JPG
Richard KortsAsked:
Who is Participating?
 
Julian HansenCommented:
Richard,

Take a look at line 144
<div class="col-sm-3 col-xs-3" style="font-size:20px;"><input type="text" name="flow" maxlength="6" style="width:80px;" value=""><div>

Open in new window

The closing <div> is actually an opening <div> you are missing the '/'
Should be
<div class="col-sm-3 col-xs-3" style="font-size:20px;"><input type="text" name="flow" maxlength="6" style="width:80px;" value=""></div>

Open in new window

0
 
Richard KortsAuthor Commented:
I knew it had to be simple.

Thanks.
0
 
Julian HansenCommented:
Sometimes even simple needs a second pair of eyes.

You are welcome, as always.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.