In bootstrap 3 how do I get my div height to grow dymaically based on the content with it?

I have a bootstrap template that I'm modifying. Within a row of one page there is a form and a slider control. With the slider control the form maintains its natural height. Without the slider the rows underneath overlay the form. Is there a way, within the bootstrap framework to make sure that a div maintains its "natural height" based on the contents within it?

    <div class="container">

        <asp:ContentPlaceHolder ID="MainContent" runat="server">
        </asp:ContentPlaceHolder>
        //MY ROW CONTAINING MY FORM STARTS BELOW
        <div class="row">

            <div class="col-sm-5 hidden-xs home_form">
                    <div class="col-sm-12 well lform">
                        <div class="row clearfix">
                            <form class="form-vertical" action="listings.html">
                                <div class="col-sm-12 clearfix">


                                </div>
                                <div class="row">

                                    <div class="col-sm-6 pull-right" style="margin-top: 10px;">
                                        <button class="btn btn-primary pull-right" type="submit">Search</button>

                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
            </div>
            //THIS ROW CONTAINS THE SLIDER. IF I LEAVE THIS ROW IN, NO PROBLEMS
            //IF I TAKE IT OUT, ANY ROWS BELOW RISE UP AND LAY OVER THE ROW WITH
            //WITH MY FORM AND MAKES A MESS OF THINGS.
            <div class="col-md-7 col-sm-7 col-xs-12 no_margin_left home_carousel pull-right">
                      
            </div>
        </div

other rows below

Open in new window

LVL 1
Michael SterlingWeb Applications DeveloperAsked:
Who is Participating?
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:
//THIS ROW CONTAINS THE SLIDER. IF I LEAVE THIS ROW IN, NO PROBLEMS
Do you mean row or column?

A link to your site would help but I suspect that by not clearing the
0
Michael SterlingWeb Applications DeveloperAuthor Commented:
@julianH: Yes, I meant column, my mistake. I'm including the entire HTML from the included sample index page of the template that I'm using, that i'm trying to modify.

<!DOCTYPE html>
<html lang="en"><head>
	<meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <meta charset="utf-8">
    <title>Real estate - Bootstrap</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="">
    <meta name="author" content="">

	<link id="switch_style" href="css/real_estate.css" rel="stylesheet">
	<link href="css/theme.css" rel="stylesheet">
    <!--[if lt IE 9]>
		<script src="//html5shim.googlecode.com/svn/trunk/html5.js"></script>
	<![endif]-->
	
</head>

<body>
	
    <div class="container">
		<div class="row"><!-- start header -->
			<div class="col-sm-4 col-xs-6 logo">
				<a href="index.html">
				<div class="row">
					<div class="col-sm-3 hidden-xs logo-img">
						<img src="css/images/Home-green-48.png" alt=""/>
					</div>
					<div class="col-sm-9 logo-text">
						<h1><small>Bootstrap</small><br /><span>Real</span> estate</h1>
					</div>
				</div>
				</a>
			</div>		
			<div class="col-sm-4 col-xs-6 customer_service pull-right text-right">
				<h4 class="phone"><span class="hidden-xs">Customer service: </span>0800 8475 548</h4>
				<h4><small>24 hours a day, 7 days a week</small></h4>
			</div>
		</div><!-- end header -->
		
		<div class="row"><!-- start nav -->
			<div class="col-sm-12">

				<nav class="navbar navbar-inverse" role="navigation" >
					<div class="navbar-inner">
				  <!-- Brand and toggle get grouped for better mobile display -->
				  <div class="navbar-header">
				    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
				      <span class="sr-only">Toggle navigation</span>
				      <span class="icon-bar"></span>
				      <span class="icon-bar"></span>
				      <span class="icon-bar"></span>
				    </button>
				    <a class="navbar-brand visible-xs" href="#">Menu</a>
				  </div>

				  <!-- Collect the nav links, forms, and other content for toggling -->
				  <div class="collapse navbar-collapse navbar-ex1-collapse">
				    <ul class="nav navbar-nav">
						<li><a href="listings.html" class="first">For sale</a></li>
						<li><a href="map_properties.html">To rent</a></li>
						<li><a href="compare.html">New homes</a></li>
						<li><a href="property.html">Property of the day</a></li>

						<li class="dropdown">
							<a href="#" class="dropdown-toggle" data-toggle="dropdown">Property pages <b class="caret"></b></a>
							<ul class="dropdown-menu">
								<li><a href="listings.html">Property listings</a></li>
								<li><a href="map_properties.html">Properties map</a></li>
								<li><a href="property.html">Single property</a></li>
								<li><a href="compare.html">Compare properties</a></li>
							</ul>
						</li>
                        
						<li class="dropdown">
							<a href="#" class="dropdown-toggle" data-toggle="dropdown">Other pages <b class="caret"></b></a>
							<ul class="dropdown-menu">
                                <li><a href="typography.html">Typography</a></li>
                                <li><a href="terms.html">Terms and conditions</a></li>
                                <li><a href="contact.html">Contact us</a></li>
                                <li><a href="about.html">About us</a></li>
							</ul>
						</li>
				    </ul>

				    					<ul class="nav navbar-nav navbar-right">
									
									<li class="dropdown">
										<a class="dropdown-toggle" href="#" data-toggle="dropdown">Sign Up<strong class="caret"></strong></a>
										<div class="dropdown-menu">
											<form action="index.html" method="post">
												<input type="text" name="user[username]" placeholder="Full name" size="30" />
												<input type="password" name="user[password]" placeholder="Email" size="30" />
												<input type="password" name="user[password]" placeholder="Password" size="30" />
												
												<input class="btn btn-primary" type="submit" name="commit" value="Sign Up" />
											</form>
										</div>
									</li>			
									
									<li class="dropdown">
										<a class="dropdown-toggle" href="#" data-toggle="dropdown">Sign In <strong class="caret"></strong></a>
										<div class="dropdown-menu">
											<form action="index.html" method="post">
												<input type="text" name="user[username]" placeholder="Username or email" size="30" /><br class="visible-xs"/>
												<input type="password" name="user[password]" placeholder="Password" size="30" /><br class="visible-xs"/>
												<input id="remember_me" type="checkbox" name="user[remember_me]" value="1" />
												<label class="string optional"> Remember me</label>
												
												<input class="btn btn-primary" type="submit" name="commit" value="Sign In" />
											</form>
										</div>
									</li>
									
								</ul>

				  </div><!-- /.navbar-collapse -->
				</div>
				</nav>

			</div>
		</div><!-- end nav -->		<div class="row">
	
	<div class="col-sm-5 hidden-xs home_form">

			<div class="col-sm-12 well lform">

				<div class="row">
							<form class="form-vertical" action="listings.html">
			<fieldset>
					<div class="col-sm-12">
					 
					 	<div class="form-group">
					    	<label>Location</label>
					    	<input type="text" class="form-control" placeholder="Where do you want to live?">
					  	</div>
						
						<div class="row">
							<div class="col-sm-6">

								<div class="form-group">
							    	<label>Search radius:</label>
										<select class="form-control">
											<option>This area only</option>
											<option>Within 1/4 mile</option>
											<option>Within 1/2 mile</option>
											<option>Within 1 mile</option>
											<option>Within 3 miles</option>
											<option>Within 5 miles</option>
											<option>Within 10 miles</option>
											<option>Within 15 miles</option>
											<option>Within 20 miles</option>
											<option>Within 30 miles</option>
											<option>Within 40 miles</option>
										</select>
								</div>

							</div>
							<div class="col-sm-6">	

								<div class="form-group">
							    	<label>Property type:</label>
										<select class="form-control">
											<option>Any</option>
											<option>Houses</option>
											<option>Flats/ Apartments</option>
											<option>Bungalows</option>
											<option>Land</option>
											<option>Commercial property</option>
											<option>Other</option>
										</select>
								</div>

							</div>		
						</div>	
						<div class="row">						  
							<div class="col-sm-6">	

								<div class="form-group">
							    	<label >Bedrooms:</label>
										<select class="form-control">
											<option>Any</option>
											<option>1</option>
											<option>2</option>
											<option>3</option>
											<option>4</option>
											<option>5+</option>
										</select>
								</div>

							</div>
							<div class="col-sm-6">	

								<div class="form-group">
							    	<label>Rent or Buy</label>
										<select class="form-control">
											<option>Any</option>
											<option>Rent</option>
											<option>Buy</option>
										</select>
								</div>

							</div>		
							
						</div>							
						<div class="row hidden-sm">						  
							<div class="col-sm-6">	

								<div class="form-group">
							    	<label>Minimum Price</label>
										<select class="form-control">
											<option selected="selected" value="">No min</option><option value="50000">50,000</option><option value="60000">60,000</option><option value="70000">70,000</option><option value="80000">80,000</option><option value="90000">90,000</option><option value="100000">100,000</option><option value="110000">110,000</option><option value="120000">120,000</option><option value="125000">125,000</option><option value="130000">130,000</option><option value="140000">140,000</option><option value="150000">150,000</option><option value="160000">160,000</option><option value="170000">170,000</option><option value="175000">175,000</option><option value="180000">180,000</option><option value="190000">190,000</option><option value="200000">200,000</option><option value="210000">210,000</option><option value="220000">220,000</option><option value="230000">230,000</option><option value="240000">240,000</option><option value="250000">250,000</option><option value="260000">260,000</option><option value="270000">270,000</option><option value="280000">280,000</option><option value="290000">290,000</option><option value="300000">300,000</option><option value="325000">325,000</option><option value="350000">350,000</option><option value="375000">375,000</option><option value="400000">400,000</option><option value="425000">425,000</option><option value="450000">450,000</option><option value="475000">475,000</option><option value="500000">500,000</option><option value="550000">550,000</option><option value="600000">600,000</option><option value="650000">650,000</option><option value="700000">700,000</option><option value="800000">800,000</option><option value="900000">900,000</option><option value="1000000">1,000,000</option><option value="1500000">1,500,000</option><option value="2000000">2,000,000</option><option value="3000000">3,000,000</option><option value="">No min</option>
										</select>
								</div>

							</div>
							<div class="col-sm-6">	

								<div class="form-group">
							    	<label>Maximum Price</label>
										<select class="form-control">
											<option selected="selected" value="">No min</option><option value="50000">50,000</option><option value="60000">60,000</option><option value="70000">70,000</option><option value="80000">80,000</option><option value="90000">90,000</option><option value="100000">100,000</option><option value="110000">110,000</option><option value="120000">120,000</option><option value="125000">125,000</option><option value="130000">130,000</option><option value="140000">140,000</option><option value="150000">150,000</option><option value="160000">160,000</option><option value="170000">170,000</option><option value="175000">175,000</option><option value="180000">180,000</option><option value="190000">190,000</option><option value="200000">200,000</option><option value="210000">210,000</option><option value="220000">220,000</option><option value="230000">230,000</option><option value="240000">240,000</option><option value="250000">250,000</option><option value="260000">260,000</option><option value="270000">270,000</option><option value="280000">280,000</option><option value="290000">290,000</option><option value="300000">300,000</option><option value="325000">325,000</option><option value="350000">350,000</option><option value="375000">375,000</option><option value="400000">400,000</option><option value="425000">425,000</option><option value="450000">450,000</option><option value="475000">475,000</option><option value="500000">500,000</option><option value="550000">550,000</option><option value="600000">600,000</option><option value="650000">650,000</option><option value="700000">700,000</option><option value="800000">800,000</option><option value="900000">900,000</option><option value="1000000">1,000,000</option><option value="1500000">1,500,000</option><option value="2000000">2,000,000</option><option value="3000000">3,000,000</option><option value="">No min</option>
										</select>
								</div>

							</div>		
							
						</div>	
						
					</div>
					<div class="row">	
						
						<div class="col-sm-6 pull-right" style="margin-top: 10px;">
							<button class="btn btn-primary pull-right" type="submit">Search</button>
							
						</div>
					</div>						
									
			</fieldset>
		</form>
				</div>

	</div>	</div>
	<div class="col-md-7 col-sm-7 col-xs-12 no_margin_left home_carousel pull-right">

		<!-- Start slideshow-carousel -->
					                             
                  
        
                <div id="carousel-home" class="carousel slide" data-ride="carousel">

<div class="showcase-arrow-next" href="#carousel-home" data-slide="next" style="display: none;"></div>
<div class="showcase-arrow-previous" href="#carousel-home" data-slide="next" style="display: none;"></div>
          <!-- Wrapper for slides -->
          <div class="carousel-inner">
           
                
                			               <div class="item active">
			<img src="css/images/carousel_1.jpg" alt="">
				
				
				<div class="carousel-caption">
					<a href="map_properties.html"><h4>Map of properties</h4>
					<p>Interested in buying a flat or house in Richmond?</p></a>
				</div>
			</div>
			               <div class="item ">
			<img src="css/images/carousel_2.jpg" alt="">
				
				
				<div class="carousel-caption">
					<a href="listings.html"><h4>Search listings</h4>
					<p>View a listing of all the homes according to your taste, wherever you want</p></a>
				</div>
			</div>
			               <div class="item ">
			<img src="css/images/carousel_3.jpg" alt="">
				
				
				<div class="carousel-caption">
					<a href="property.html"><h4>View a property</h4>
					<p>This is our featured house of the day, good value and spacious enough for a family of 5</p></a>
				</div>
			</div>
			
            </div>        
			
		</div>
		<!-- // end of slideshow-carousel -->
		
	</div>
</div>

<div class="row home-latest">
	<div class="col-xs-4">
		<h3 class="hidden-xs"><span>Latest</span> properties</h3>
		<h3 class="visible-xs"><span>Latest</span></h3>
		<a href="map_properties.html"><img src="css/images/latest_properties.jpg" alt="" /></a>
		<p>Sign up for our weekly newsletter and stay up-to-date with the latest offers, and newest products.<a href="map_properties.html" class="pull-right">more...</a></p>
	</div>		
	<div class="col-xs-4">
		<h3 class="hidden-xs"><span>New</span> homes</h3>
		<h3 class="visible-xs"><span>New homes</span></h3>
		<a href="listings.html"><img src="css/images/new_homes.png" alt="" /></a>
		<p>Sign up for our weekly newsletter and stay up-to-date with the latest offers, and newest products.<a href="listings.html" class="pull-right">more...</a></p>
	</div>		
	<div class="col-xs-4">
		<h3 class="hidden-xs"><span>Homes</span> abroad</h3>
		<h3 class="visible-xs"><span>Overseas</span></h3>
		<a href="listings.html"><img src="css/images/homes_abroad.png" alt="" /></a>
		<p>Sign up for our weekly newsletter and stay up-to-date with the latest offers, and newest products.<a href="listings.html" class="pull-right">more...</a></p>
	</div>		
</div>		



<div class="row">
	<br />
	<div class="col-sm-4 hidden-xs">
		<h3><span>Popular</span> cities</h3>
		
		
		<div id="home_map_canvas"></div>
		
		
		
	</div>
	<div class="col-sm-4 visible-xs">
		<h3><span>Search </span> properties</h3>
				<div class="col-sm-12 well lform">

				<div class="row">
							<form class="form-vertical" action="listings.html">
			<fieldset>
					<div class="col-sm-12">
					 
					 	<div class="form-group">
					    	<label>Location</label>
					    	<input type="text" class="form-control" placeholder="Where do you want to live?">
					  	</div>
						
						<div class="row">
							<div class="col-sm-6">

								<div class="form-group">
							    	<label>Search radius:</label>
										<select class="form-control">
											<option>This area only</option>
											<option>Within 1/4 mile</option>
											<option>Within 1/2 mile</option>
											<option>Within 1 mile</option>
											<option>Within 3 miles</option>
											<option>Within 5 miles</option>
											<option>Within 10 miles</option>
											<option>Within 15 miles</option>
											<option>Within 20 miles</option>
											<option>Within 30 miles</option>
											<option>Within 40 miles</option>
										</select>
								</div>

							</div>
							<div class="col-sm-6">	

								<div class="form-group">
							    	<label>Property type:</label>
										<select class="form-control">
											<option>Any</option>
											<option>Houses</option>
											<option>Flats/ Apartments</option>
											<option>Bungalows</option>
											<option>Land</option>
											<option>Commercial property</option>
											<option>Other</option>
										</select>
								</div>

							</div>		
						</div>	
						<div class="row">						  
							<div class="col-sm-6">	

								<div class="form-group">
							    	<label >Bedrooms:</label>
										<select class="form-control">
											<option>Any</option>
											<option>1</option>
											<option>2</option>
											<option>3</option>
											<option>4</option>
											<option>5+</option>
										</select>
								</div>

							</div>
							<div class="col-sm-6">	

								<div class="form-group">
							    	<label>Rent or Buy</label>
										<select class="form-control">
											<option>Any</option>
											<option>Rent</option>
											<option>Buy</option>
										</select>
								</div>

							</div>		
							
						</div>							
						<div class="row hidden-sm">						  
							<div class="col-sm-6">	

								<div class="form-group">
							    	<label>Minimum Price</label>
										<select class="form-control">
											<option selected="selected" value="">No min</option><option value="50000">50,000</option><option value="60000">60,000</option><option value="70000">70,000</option><option value="80000">80,000</option><option value="90000">90,000</option><option value="100000">100,000</option><option value="110000">110,000</option><option value="120000">120,000</option><option value="125000">125,000</option><option value="130000">130,000</option><option value="140000">140,000</option><option value="150000">150,000</option><option value="160000">160,000</option><option value="170000">170,000</option><option value="175000">175,000</option><option value="180000">180,000</option><option value="190000">190,000</option><option value="200000">200,000</option><option value="210000">210,000</option><option value="220000">220,000</option><option value="230000">230,000</option><option value="240000">240,000</option><option value="250000">250,000</option><option value="260000">260,000</option><option value="270000">270,000</option><option value="280000">280,000</option><option value="290000">290,000</option><option value="300000">300,000</option><option value="325000">325,000</option><option value="350000">350,000</option><option value="375000">375,000</option><option value="400000">400,000</option><option value="425000">425,000</option><option value="450000">450,000</option><option value="475000">475,000</option><option value="500000">500,000</option><option value="550000">550,000</option><option value="600000">600,000</option><option value="650000">650,000</option><option value="700000">700,000</option><option value="800000">800,000</option><option value="900000">900,000</option><option value="1000000">1,000,000</option><option value="1500000">1,500,000</option><option value="2000000">2,000,000</option><option value="3000000">3,000,000</option><option value="">No min</option>
										</select>
								</div>

							</div>
							<div class="col-sm-6">	

								<div class="form-group">
							    	<label>Maximum Price</label>
										<select class="form-control">
											<option selected="selected" value="">No min</option><option value="50000">50,000</option><option value="60000">60,000</option><option value="70000">70,000</option><option value="80000">80,000</option><option value="90000">90,000</option><option value="100000">100,000</option><option value="110000">110,000</option><option value="120000">120,000</option><option value="125000">125,000</option><option value="130000">130,000</option><option value="140000">140,000</option><option value="150000">150,000</option><option value="160000">160,000</option><option value="170000">170,000</option><option value="175000">175,000</option><option value="180000">180,000</option><option value="190000">190,000</option><option value="200000">200,000</option><option value="210000">210,000</option><option value="220000">220,000</option><option value="230000">230,000</option><option value="240000">240,000</option><option value="250000">250,000</option><option value="260000">260,000</option><option value="270000">270,000</option><option value="280000">280,000</option><option value="290000">290,000</option><option value="300000">300,000</option><option value="325000">325,000</option><option value="350000">350,000</option><option value="375000">375,000</option><option value="400000">400,000</option><option value="425000">425,000</option><option value="450000">450,000</option><option value="475000">475,000</option><option value="500000">500,000</option><option value="550000">550,000</option><option value="600000">600,000</option><option value="650000">650,000</option><option value="700000">700,000</option><option value="800000">800,000</option><option value="900000">900,000</option><option value="1000000">1,000,000</option><option value="1500000">1,500,000</option><option value="2000000">2,000,000</option><option value="3000000">3,000,000</option><option value="">No min</option>
										</select>
								</div>

							</div>		
							
						</div>	
						
					</div>
					<div class="row">	
						
						<div class="col-sm-6 pull-right" style="margin-top: 10px;">
							<button class="btn btn-primary pull-right" type="submit">Search</button>
							
						</div>
					</div>						
									
			</fieldset>
		</form>
				</div>

	</div>	</div>
	<div class="col-sm-8 ">
		<h3><span>Featured</span> listings</h3>
		
		<table class="table table-bordered table-striped">
			<thead>
				<tr>
					<th>Description</th>
					<th class="hidden-sm hidden-xs">Region</th>
					<th>Price</th>
					<th class="hidden-sm hidden-xs">Days on market</th>
					<th class="hidden-sm hidden-xs">&nbsp;</th>
				</tr>
			</thead>
			<tbody>
				<tr>
					<td><a href="property.html">8 bedroom house for sale</a></td>
					<td class="hidden-sm hidden-xs">London</td>
					<td>&pound;39,950,000</td>
					<td class="hidden-sm hidden-xs">1 day</td>
					<td class="hidden-sm hidden-xs"><a href="property.html">View</a></td>
				</tr>     
				<tr>
					<td><a href="property.html">2 bedroom bungalow for sale</a></td>
					<td class="hidden-sm hidden-xs">London</td>
					<td>&pound;215,000</td>
					<td class="hidden-sm hidden-xs">3 days</td>
					<td class="hidden-sm hidden-xs"><a href="property.html">View</a></td>
				</tr>      
				<tr>
					<td><a href="property.html">3 bedroom house for sale</a></td>
					<td class="hidden-sm hidden-xs">London</td>
					<td>&pound;470,000</td>
					<td class="hidden-sm hidden-xs">2 weeks</td>
					<td class="hidden-sm hidden-xs"><a href="property.html">View</a></td>
				</tr>  	 
				<tr>
					<td><a href="property.html">3 bedroom house for rent</a></td>
					<td class="hidden-sm hidden-xs">London</td>
					<td>&pound;1,000pm</td>
					<td class="hidden-sm hidden-xs">1 month</td>
					<td class="hidden-sm hidden-xs"><a href="property.html">View</a></td>
				</tr>        
				<tr>
					<td><a href="property.html">6 bedroom house for sale</a></td>
					<td class="hidden-sm hidden-xs">London</td>
					<td>&pound;19,950,000</td>
					<td class="hidden-sm hidden-xs">2 months</td>
					<td class="hidden-sm hidden-xs"><a href="property.html">View</a></td>
				</tr>     
				<tr>
					<td><a href="property.html">5 bedroom bungalow for sale</a></td>
					<td class="hidden-sm hidden-xs">London</td>
					<td>&pound;950pm</td>
					<td class="hidden-sm hidden-xs">3 months</td>
					<td class="hidden-sm hidden-xs"><a href="property.html">View</a></td>
				</tr>      
				<tr>
					<td><a href="property.html">3 bedroom house for sale</a></td>
					<td class="hidden-sm hidden-xs">London</td>
					<td>&pound;470,000</td>
					<td class="hidden-sm hidden-xs">1 year</td>
					<td class="hidden-sm hidden-xs"><a href="property.html">View</a></td>
				</tr>  	    
				
			</tbody>
		</table>
		More cities : <a href="map_properties.html">London</a>, <a href="map_properties.html">Scotland</a>, <a href="map_properties.html">Wales</a>, <a href="map_properties.html">Northern Ireland</a>, <a href="map_properties.html">Birmingham</a>, <a href="map_properties.html">Leeds</a>, <a href="map_properties.html">Glasgow</a>, <a href="map_properties.html">Sheffield</a>, <a href="map_properties.html">Bradford</a>, <a href="map_properties.html">Edinburgh</a>, <a href="map_properties.html">Liverpool</a>,  <a href="map_properties.html">Manchester</a>
		
	</div>
	
</div>

<footer>
	<hr />	
	<p class="pull-right"><a href="#">Back to top</a></p>
	<p>
		<a href="index.html">Home</a> |
		<a href="about.html">About</a> |
		<a href="typography.html">Typography</a> |
		<a href="terms.html">Terms and Conditions</a> |
		<a href="contact.html">Contact Us</a><br />
		All content &copy; 2014 | <a href="about.html">Built with Twitter Bootstrap</a> | <a href="https://wrapbootstrap.com/">WrapBootstrap</a>.
	</p>
</footer>

</div> <!-- /container -->

<div id="theme_switcher">
	<div class="btn-group">
		<a class="btn btn-success dropdown-toggle" data-toggle="dropdown" href="#">Switch theme <span class="caret"></span></a>
		<ul class="dropdown-menu">
            <li><a href="#" data-theme="real_estate">Real Estate</a></li>
			<li><a href="#" data-theme="cerulean">Cerulean</a></li>
			<li><a href="#" data-theme="lumen">Lumen</a></li>
            <li><a href="#" data-theme="slate">Slate</a></li>
			<li><a href="#" data-theme="united">United</a></li>
			<li><a href="#" data-theme="cyborg">Cyborg</a></li>
            <li><a href="#" data-theme="spacelab">Spacelab</a></li>
			<li><a href="#" data-theme="journal">Journal</a></li>
			<li><a href="#" data-theme="simplex">Simplex</a></li>
            <li><a href="#" data-theme="superhero">Superhero</a></li>
            <li><a href="#" data-theme="amelia">Amelia</a></li>            
			<li><a href="#" data-theme="cosmo">Cosmo</a></li>
			<li><a href="#" data-theme="flatly">Flatly</a></li>
		</ul>
	</div>
</div>

<script type="text/javascript" src="js/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="js/response.min.js"></script>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>

    <!-- Important Owl stylesheet -->
    <link rel="stylesheet" href="js/owl-carousel/owl.carousel.css">
     
    <!-- Default Theme -->
    <link rel="stylesheet" href="js/owl-carousel/owl.theme.css">
     
    <!-- Include js plugin -->
    <script src="js/owl-carousel/owl.carousel.js"></script>

<script type="text/javascript" src="js/jquery.aw-showcase/jquery.aw-showcase.js"></script>
<link rel="stylesheet" href="js/jquery.aw-showcase/css/style.css" />

<script type="text/javascript" src="bootstrap/js/bootstrap.js"></script>

<link rel="stylesheet" href="js/badger/badger.min.css" />
<script type="text/javascript" src="js/badger/badger.min.js"></script>

<link rel="stylesheet" href="js/sticky/sticky.min.css" />
<script type="text/javascript" src="js/sticky/sticky.min.js"></script>

<script type="text/javascript" src="js/portamento-min.js"></script>
<script type="text/javascript" src="js/global.js"></script>

</body>
</html>

Open in new window


this is the link to the example:

http://wrapbootstrap.com/preview/WB02793H5

on this page, there is the slider, (showing the homes) that lives in a row. when the slider is commented out, the height of the row colapses and i don't know why.
0
Michael SterlingWeb Applications DeveloperAuthor Commented:
@julianH: Also, above, in your post, your response seemed to cut off?

 "...but I suspect that by not clearing the"

Clearing the what?
0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

Julian HansenCommented:
My initial feeling was that you were not clearing the float after the last column - however the .row class (and your use of .clearfix) should ensure that it is being cleared - however to be sure I needed to see the full page - forgot to go back and remove the clearing thing.
0
Michael SterlingWeb Applications DeveloperAuthor Commented:
@julianH: So, are you saying that I need to add another row with a clearfix class after my last column?
0
Julian HansenCommented:
No - that was my initial feeling but I reserved comment pending seeing your code - I am looking at the code now
0
Julian HansenCommented:
I can't seem to replicate the problem - below is the screenshot of what I am seeing - bear in mind that your page make relative references to scripts and stylesheets - not all of which I have so I don't know if what I am seeing is what I should be seeing.
Here is a screen shot of what I see - both before and after removing that row.

The only changes I made was to swap out your theme.css for bootstrap.css
Screen shotIt might be that we are not comparing apples with apples here - I am using bootstrap.css which has a clear float as part of the .row definition - so maybe that is what the issue is - but without that stylesheet and the real_estate.css I can't make an exact evaluation.

If you have an online version of your page (first prize) otherwise if you can post those stylesheets that might help
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
Michael SterlingWeb Applications DeveloperAuthor Commented:
@julianH: Above when you said: "...both before and after removing that row..." did you mean column?
0
Julian HansenCommented:
did you mean column?
Yes - everything inside this <div>
	<div class="col-md-7 col-sm-7 col-xs-12 no_margin_left home_carousel pull-right">

Open in new window


You can test yourself with this link http://www.marcorpsa.com/ee/t810.html. Go into your console window and manually delete that element. Doesn't seem to change anything.
0
Michael SterlingWeb Applications DeveloperAuthor Commented:
@julianH: I figured it out with the help of a coworker, and it was related to that theme.css file. The creator had defined a class within the theme.css file called .lform, as follows:

.lform {
    background-repeat: repeat-x;
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1);
    border: 1px solid #bfbfbf;
    background-image: linear-gradient(to bottom, #ffffff 0%, #e5e5e5 100%);
}

this was causing the alignment of the controls within a container (a <div></div>) that used that class, to be thrown off for what ever reason, and I still don't know why. At any rate, I over-wrote that class, copying the gradient using this site:

http://www.colorzilla.com/gradient-editor/ (which is a great tool for that if you don't already have something similar)

popped it in place and it worked just fine. Thanks for pointing me in the right direction and your input.
0
Julian HansenCommented:
You are welcome.
0
Michael SterlingWeb Applications DeveloperAuthor Commented:
thanks
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
CSS

From novice to tech pro — start learning today.

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.