160
Hi!
I have multiple floating boxes inside a main box that has a fixed dimension. The floating boxes may vary in number and i want them to stay lined up along the top of the main box with a horizontal scrollbar to see those that are rendered outside the main box.. but since they are floated next to each other they wrap and i get a vertical scroll bar. i want any extras to float out the right side of the box and stay hidden. This example has four inner boxes but it could have as many as 20.
Is there a way to get them to line up at the top of the main box and not wrap to the next line?
Thanks!
[HTML]<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<title>Three elements with "float: left" applied</title>
<style type="text/css" media="screen">
.containingbox
{
margin: 100px 0px 0px 100px;
padding: 0px 0px 0px 0px;
width: 400px;
height: 200px;
border: 1px solid #000;
overflow-x: auto
}
.floatleft
{
float: left;
width: 100px;
height: 100px;
background-color: #F63;
border: 1px solid #F30;
}
</style>
</head>
<body>
<div class="containingbox">
<div class="floatleft">
</div>
<div class="floatleft">
</div>
<div class="floatleft">
</div>
<div class="floatleft">
</div>
</div>
</body>
</html>[/html]
