Vertical wrapping?

Is there a way to inplement a "vertical wrap"? Example I have 10 divisions that are children of a fixed size division. 5 of the divisions will fit vertically in the parent division, but the other five I would like to wrap to the next "column". I have tried doing this by setting the absolute position with javascript, but it is very slow when I have 500 objects to move. Any help?

parent div
     div1     div6
     div2     div7
     div3     div8
     div4     div9
     div5     div10
LVL 2
joeschuhAsked:
Who is Participating?

[Webinar] Streamline your web hosting managementRegister Today

x
 
Eternal_StudentConnect With a Mentor Commented:
You can float divs. So for example this what you would do is:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Float</title>

<style type="text/css">
      html, body {
            margin:0px;
            }      
      #container {
            width:800px;
            background-color:#FFFFCC;
            }
      .floateddiv {
            width:150px;
            height:150px;
            background-color:#3399FF;
            border:1px solid #000;
            float:left;
            margin:3px;
            }
</style>
</head>

<body>

<div id="container">
      <div class="floateddiv">&nbsp;</div>
      <div class="floateddiv">&nbsp;</div>
      <div class="floateddiv">&nbsp;</div>
      <div class="floateddiv">&nbsp;</div>
      <div class="floateddiv">&nbsp;</div>
      <div class="floateddiv">&nbsp;</div>
      <div class="floateddiv">&nbsp;</div>
      <div class="floateddiv">&nbsp;</div>
      <div class="floateddiv">&nbsp;</div>
      <div class="floateddiv">&nbsp;</div>
</div>

</body>
</html>

Is that the kind of thing you are looking for ? You can put as many divs in #container as you like it will just start a new line to accomodate.


0
 
Eternal_StudentCommented:
Oh you need to add:

<div style="clear:both; "></div>

Before the closing div tag for the container.
0
 
joeschuhAuthor Commented:
Not exactly. This makes the divisions wrap horizontally like the pattern below.

div 1     div2     div3     div4     div5
div6      div7     div8     div9     div 10

I need the divisions to wrap vertically like the pattern below.

div1     div6
div2     div7
div3     div8
div4     div9
div5     div10
0
 
GrandSchtroumpfConnect With a Mentor Commented:
No, there is no vertical wrapping...  at least not for languages that are written left-to-right or right-to-left.
I guess languages that are written top-to-bottom must have that as their default wrapping behaviour for inline elements.
0
 
mach-Connect With a Mentor Commented:
It sounds like you want something like this:
http://alistapart.com/articles/multicolumnlists
0
All Courses

From novice to tech pro — start learning today.