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 KortsBusiness Owner / Chief DeveloperAsked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

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

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Richard KortsBusiness Owner / Chief DeveloperAuthor 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
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
HTML

From novice to tech pro — start learning today.