I have this example in which i am displaying some content which is wrapped in a section tag.In the end i am having http://dl.dropbox.com/u/51537247/the%20app/_check_boxes_form.html
and this is the code i am using
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Sales,Expenditure and Stocks </title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<!-- Le styles -->
<link href="assets/css/bootstrap.css" rel="stylesheet">
<style type="text/css">
body {
padding-top: 20px;
padding-bottom: 40px;
}
.navigation{
background-color:##008B8B;
border:1px solid #ADFF2F;
}
a{
margin-right:20px;
}
label{
width:15%;
float:left;
}
article{
margin-top:3px;
}
.top_article{
border:1px dotted #CC6600;
}
button{
margin-right:8%;
}
section{
display:inline-block;
border:1px solid orange;
width:100px;
margin-bottom:10px;
}
.price_section{
width:40px;
}
.contain_sections{
width:100%;
margin-left:15%;
}
.services_articled{
overflow:hidden;
}
</style>
<link href="assets/css/bootstrap-responsive.css" rel="stylesheet">
<!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<!-- Le fav and touch icons -->
<link rel="shortcut icon" href="assets/ico/favicon.ico">
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="../assets/ico/apple-touch-icon-144-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="../assets/ico/apple-touch-icon-114-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="../assets/ico/apple-touch-icon-72-precomposed.png">
<link rel="apple-touch-icon-precomposed" href="../assets/ico/apple-touch-icon-57-precomposed.png">
</head>
<body>
<div class="container">
<div class="row">
<!-- Main hero unit for a primary marketing message or call to action -->
<div class="span12 navigation">
<a href="home.html">Home</a> <a href="services.html">Services</a><a href="expenses.html">Expenses</a><a href="daily_income.html">Daily Income</a><a href="daily_expenditure.html">Daily Expenditure</a><a href="analysis_dashboard.html">Analysis Dashboard</a><a href="account.html">Account</a>
</div>
</div>
<!-- Example row of columns -->
<div class="row">
<div class="span12">
<article class="top_article">
<article>
<label>Date</label><input type="text" disabled="disabled" name="service_name" />
</article>
<article>
<label>Customer Name</label><input type="text" name="service_name" />
</article>
<article class="services_articled">
<label>Services Offered</label>
<article class="contain_sections">
<section>
<header>Tour Guiding</header><input type="checkbox" name="tour" /><footer><input class="price_section" type="text" name="tour_price" /></footer>
</section>
<section>
<header>Tour Guiding</header><input type="checkbox" name="tour" /><footer><input class="price_section" type="text" name="tour_price" /></footer>
</section>
<section>
<header>Tour Guiding</header><input type="checkbox" name="tour" /><footer><input class="price_section" type="text" name="tour_price" /></footer>
</section>
<section>
<header>Tour Guiding</header><input type="checkbox" name="tour" /><footer><input class="price_section" type="text" name="tour_price" /></footer>
</section>
<section>
<header>Tour Guiding</header><input type="checkbox" name="tour" /><footer><input class="price_section" type="text" name="tour_price" /></footer>
</section>
<section>
<header>Tour Guiding</header><input type="checkbox" name="tour" /><footer><input class="price_section" type="text" name="tour_price" /></footer>
</section>
<section>
<header>Tour Guiding</header><input type="checkbox" name="tour" /><footer><input class="price_section" type="text" name="tour_price" /></footer>
</section>
<section>
<header>Tour Guiding</header><input type="checkbox" name="tour" /><footer><input class="price_section" type="text" name="tour_price" value="eighth"/></footer>
</section>
<section>
<header>Tour Guiding</header><input type="checkbox" name="tour" /><footer><input class="price_section" type="text" name="tour_price" /></footer>
</section>
<section>
<header>Tour Guiding</header><input type="checkbox" name="tour" /><footer><input class="price_section" type="text" name="tour_price" /></footer>
</section>
</article>
</article>
<article>
<label>Services Totals</label><input type="text" name="service_name" />
</article>
<button>Save New</button><button>Cancel</button>
</article>
</div>
</div>
<hr>
<footer>
<p>© Company 2012</p>
</footer>
</div> <!-- /container -->
<!-- Le javascript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="assets/js/jquery.js"></script>
<script src="assets/js/bootstrap-transition.js"></script>
<script src="assets/js/bootstrap-alert.js"></script>
<script src="assets/js/bootstrap-modal.js"></script>
<script src="assets/js/bootstrap-dropdown.js"></script>
<script src="assets/js/bootstrap-scrollspy.js"></script>
<script src="assets/js/bootstrap-tab.js"></script>
<script src="assets/js/bootstrap-tooltip.js"></script>
<script src="assets/js/bootstrap-popover.js"></script>
<script src="assets/js/bootstrap-button.js"></script>
<script src="assets/js/bootstrap-collapse.js"></script>
<script src="assets/js/bootstrap-carousel.js"></script>
<script src="assets/js/bootstrap-typeahead.js"></script>
</body>
</html>
I am using overflow:hidden; to hide the overflowing item but i would have wanted the overflowing move to the next spot where there is enough space since with overflow hidden,some important text is being hidden.I have marked the overflowing element with the value eighth.
This piece of code was the problem
and i fixed it like