ansaurus

Question

Answer 1

+1 A:

This seems close to what you want:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd"&gt;

<html lang="en">
<head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 <title>untitled</title>
 <meta name="generator" content="TextMate http://macromates.com/"&gt;
 <meta name="author" content="Sören Kuklau">
 <!-- Date: 2008-08-31 -->
 <style type="text/css" media="screen">
  #foo { background: red; max-height: 100px; overflow-y: hidden; }

  .bar { background: blue; width: 100px; height: 100px; float: left; margin: 1em; }
 </style>
</head>
<body>
<div id="foo">
 <div class="bar"></div>
 <div class="bar"></div>
 <div class="bar"></div>
 <div class="bar"></div>
 <div class="bar"></div>
 <div class="bar"></div>
</div>
</body>
</html>

Sören Kuklau 2008-08-31 21:24:05

Answer 2

+3 A:

you can use the clip property:

   #container {
       position: absolute;
       clip: rect(0px,200px,100px,0px);
       overflow: hidden;

       background: red;

note the position: absolute and overflow: hidden needed in order to get clip to work.

fcurella 2008-08-31 21:28:31

what is clip's browser support?

alex 2008-10-28 06:27:30

Answer 3

+7 A:

You may put an inner div in the container that is enough wide to hold all the floated divs.

<div id="container" style="background-color:red;overflow:hidden;width:200px">
  <div id="inner" style="overflow:hidden;width: 2000px">
     <div style="float:left;background-color:blue;width:50px;height:50px">
     </div>
     <div style="float:left;background-color:blue;width:50px;height:50px">
     </div>
     <div style="float:left;background-color:blue;width:50px;height:50px">
     </div>
     ...
  </div>
</div>

LucaM 2008-08-31 21:29:59

ansaurus

tags:

views:

answers:

CSS - Make divs align horizontally

related questions