How to make a div not break when resizing browser - html

Question

Guys I have three divs in this setup: I'm not sure if you're familiar with this bootstrap css but i should give it a try:
<div class="row-fluid">
<div class="span4"> A graph here </div>
<div class="span4"> A graph here </div>
<div class="span4"> A graph here </div>
</div>
<div class="row-fluid">
<div class="span4"> Another graph here </div>
<div class="span4"> Another graph here </div>
<div class="span4"> Another graph here </div>
</div>
span4 will make the three divs fit to the whole page proportionally. So the position is the three graphs will position each other to the top div side by side, and another three graphs below it.
My problem is, when i resize the browser window, the graphs will be under each other vertically, like they have their own container now. How to make those graphs, retain their side by side position?

Answer 1

you can do the following:
<div class="row-fluid">
<div class="third"> A graph here </div>
<div class="third"> A graph here </div>
<div class="third"> A graph here </div>
</div>
<div class="row-fluid">
<div class="third"> Another graph here </div>
<div class="third"> Another graph here </div>
<div class="third"> Another graph here </div>
</div>
and css:
.third{
float:left;
width:33.33%;
}

Answer 2

You need to put them in divs like so -
<div class="row">
<div class="col-xs-4">
graph1
</div>
<div class="col-xs-4">
graph2
</div>
<div class="col-xs-4">
graph3
</div>
</div>
Each rows divs should add up to 12 to fill that row completely. Where the col-X is on your div class= represents when your divs will stack vertically instead of horizontally. So if you had col-sm-4 your divs would stack vertically on the bootstrap "small" resolution media query. By setting them as col-xs-4 each row will stay horizontal on the small resolutions.
Also check out these resources
Bootstrap official documentation
Understanding BootStrap grid system for beginners