How to prevent divs from wrapping while hiding overflow? - html

Question

Currently I have a row containing several divs. I'm trying to prevent the contained divs from wrapping. I also do not want a scrollbar. I've tried overflow hidden and set a width on the row.
EDIT: Constraints dictate that this must be done without tables, javascript, or external libraries.
Is there a way to do this with css without resorting to tables?
JSFiddle: http://jsfiddle.net/ozsumdfb/
HTML:
<div class="row">
<div class="square">
</div>
<div class="square">
</div>
<div class="square">
</div>
<div class="square">
</div>
<div class="square">
</div>
<div class="square">
</div>
</div>
CSS:
.square {
width:100px;
height:100px;
float:left;
margin-left:3px;
background-color: #6C6;
}
.row {
width:500px;
overflow:hidden;
}

Answer 1

insteed of float:left you could try display:inline-block then just add:
.row {white-space:nowrap; }
is this what you are looking for?
fiddle

Answer 2

Try this, I added a wrapper after row had them both with 618px since you had 6 squares padding left 3px (that is (100 + 3)*6 = 618). Hope this helps.
HTML
<div class="row">
<div class="wrapper">
<div class="square">
</div>
<div class="square">
</div>
<div class="square">
</div>
<div class="square">
</div>
<div class="square">
</div>
<div class="square">
</div>
</div>
</div>
CSS
.square {
width:100px;
height:100px;
float:left;
margin-left:3px;
background-color: #6C6;
}
.row {
width:618px;
overflow-x:auto;
overflow-y:hidden;
}
.wrapper {
width: 618px;
}