How to stop html/css object from resizing - html

Question

I'm using Twitter bootstrap for an application that makes a CSS football field. I had originally built the application by downloading and dropping in Twitter bootstrap into my application. However, to take advantage of LESS, I then created a new application where I installed Twitter bootstrap with the gem for Rails applications. In this new application, if I change the size of the browser, the football fields dimensions will change (and it looks awful). In the old application, I could resize the browser and the field would stay the same. So far, the CSS I'm using is exactly the same (i.e. I haven't included any LESS into this new application) and the HTML is also the same, therefore, I'm not really sure what code if any to include in this question. From what I've told you can you tell me what has happened and how I can prevent the resizing?
Here's the code for the football field, although since it worked in my original application I don't know if changing anything with this markup will make a difference, but the layout hasn't otherwise changed either.
Note, I like the idea of a responsive website, however, I need the football field to stay the same size, so if there's something that can be done to it with css to ensure that it doesn't resize I'd be satisfied.
<div class="span3 field">
<div class="row endzonenorth">
</div>
<div class="row field">
<span class="qb"></span>
<div class="horizontalRule">
<span class="funnyzone"> END ZONE</span>
</div>
<div class="horizontalRule">
<div class="number right">10</div>
<div class="number left">10</div>
</div>
<div class="horizontalRule">
<div class="number right">20</div>
<div class="number left">20</div>
</div>
<div class="horizontalRule">
<div class="number right">30</div>
<div class="number left">30</div>
</div>
<div class="horizontalRule">
<div class="number right">40</div>
<div class="number left">40</div>
</div>
<div class="horizontalRule">
<div class="number right">50</div>
<div class="number left">50</div>
</div>
<div class="horizontalRule">
<div class="number right">40</div>
<div class="number left">40</div>
</div>
<div class="horizontalRule">
<div class="number right">30</div>
<div class="number left">30</div>
</div>
<div class="horizontalRule">
<div class="number right">20</div>
<div class="number left">20</div>
</div>
<div class="horizontalRule">
<div class="number right">10</div>
<div class="number left">10</div>
</div>
<div class="horizontalRule">
<span class="funnyzonesouth">END ZONE</span>
</div>
</div>
<div class="row endzonesouth">
</div>
</div>
CSS:
div.horizontalRule
{
clear:both;
width:100%;
background-color:#fff;
height:1px;
margin-top:30px;
margin-bottom:30px;
display: block;
opacity: .75;
}
.number.right{
color: #fff;
position: absolute;
right: 40px;
margin-top: -10px;
}
.number.left{
color: #fff;
position: absolute;
left: 40px;
margin-top: -10px;
}
.funnyzone{
opacity: .75;
/*top: 7px;*/
position: absolute;
color: #fff;
font-size: 22px;
margin-top: -25px;
margin-left: 15px;
}
.funnyzonesouth{
font-size: 22px;
color: #fff;
opacity: .75;
margin-top: 4px;
margin-left: 40px;
/*bottom: -3px;*/
position: absolute;
transform:rotate(180deg);
-ms-transform:rotate(180deg); /* IE 9 */
-moz-transform:rotate(180deg); /* Firefox */
-webkit-transform:rotate(180deg); /* Safari and Chrome */
-o-transform:rotate(180deg); /* Opera */
}
.span3.field{
background-color: rgb(96, 211, 43);
}
.row.field{
width: 90%;
background-color: #56a636;
position: relative;
margin-left: auto;
margin-right: auto;
}
.row.endzonenorth{
width: 90%;
height: 25px;
background-color: #56a636;
color: #fff;
font-size: 22px;
margin-left: auto;
margin-right: auto;
}
.row.endzonesouth{
width: 90%;
height: 25px;
background-color: #56a636;
color: #fff;
font-size: 24px;
margin-left: auto;
margin-right: auto;
}
.row.endzone{
height: 30px;
background-color: #56a636;
}
.line {
color: white;
display: block;
padding-top: 10px;
padding-bottom: 10px;
opacity: 0.55,
}
.linea{
padding-top: 10px;
padding-bottom: 10px;
color: white;
display:block;
}
.leftvertical {
width:1px;
height:410px;
background-color:#fff;
opacity: .55;
position: absolute;
left:50px;
}
.rightvertical {
width:1px;
height:410px;
background-color:#fff;
opacity: .55;
position: absolute;
right:50px;
}
.number.left
{
transform:rotate(90deg);
-ms-transform:rotate(90deg); /* IE 9 */
-moz-transform:rotate(90deg); /* Firefox */
-webkit-transform:rotate(90deg); /* Safari and Chrome */
-o-transform:rotate(90deg); /* Opera */
}
.number.right
{
transform:rotate(270deg);
-ms-transform:rotate(270deg); /* IE 9 */
-moz-transform:rotate(270deg); /* Firefox */
-webkit-transform:rotate(270deg); /* Safari and Chrome */
-o-transform:rotate(270deg); /* Opera */
}
.row.endzone{
width: 90%;
}
.row.endzone2{
width: 90%;
}
.qb{
position: absolute;
width: 50px;
height: 50px;
background-image: url('/assets/qb.png');
/*background-color: #fff;*/
left: 75px;
top: 300px;
visibility:hidden;
}
.span4.offset4{
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
font-size: 25px;
font-weight: bold;
min-height: 30px;
text-align: center;
/*width: 100%;*/
display: inline-block;
}
.row.main{
padding-top: 20px;
}
.span6.offset2{
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
/*font-size: 25px;*/
padding-top: 10px;
font-size: 16px;
font-weight: bold;
min-height: 30px;
text-align: center;
/*width: 100%;*/
display: inline-block;
}

Answer 1

you seem to be using relative width sizes, ie 100%. instead try using absolute widths ie 500px; alternatively, try setting a width for your container.
.span3.field{
width:500px;
background-color: rgb(96, 211, 43);
}
hope this is of some help..