I've put up at page at
http://nathanfunk.dyndns.org/pland/wrapping/
demonstrating the undesired wrapping as well as the desired result
(code attached to this post). The desired result is accomplished by
specifying a large width "width: 2000px;" which is not an elegant way
of solving the problem.
You'll note I am using "overflow: hidden" in the mask div. So
essentially I would like the box of the <ol> to grow independently of
the width of the mask.
Thanks for your help!
Nathan
----------------------------------------------------------
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Wrapping</title>
<style type="text/css">
..mask {
overflow: hidden;
width: 400px;
}
ol {
margin: 0;
padding: 0;
list-style: none;
}
ol.hack {
width: 2000px; /*this is an arbitrary large number
to keep the thumbnails from wrapping */
}
li {
float: left;
display: block;
margin: 0 10px 0 0;
height: 100px;
width: 100px;
background: #eee;
border: 1px solid black;
}
</style>
</head>
<body>
<p>This is the result I do <b>not</b> want:</p>
<div class="mask">
<ol>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
<li>Item 6</li>
</ol>
</div>
<p>This is the result I want:</p>
<div class="mask">
<ol class="hack">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
<li>Item 6</li>
</ol>
</div>
<p><a href="http://validator.w3.org/check?uri=referer">Validate</a></p>
</body>
</html>
Horizontal list with no wrapping
