Solved

Vertical wrapping?

Posted on 2006-07-11
7
436 Views
Last Modified: 2008-02-01
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
0
Comment
Question by:joeschuh
7 Comments
 
LVL 18

Accepted Solution

by:
Eternal_Student earned 84 total points
ID: 17082520
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
 
LVL 18

Expert Comment

by:Eternal_Student
ID: 17082531
Oh you need to add:

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

Before the closing div tag for the container.
0
 
LVL 2

Author Comment

by:joeschuh
ID: 17083561
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
 
LVL 30

Assisted Solution

by:GrandSchtroumpf
GrandSchtroumpf earned 83 total points
ID: 17085307
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
 
LVL 2

Assisted Solution

by:mach-
mach- earned 83 total points
ID: 17112209
It sounds like you want something like this:
http://alistapart.com/articles/multicolumnlists
0

Featured Post

Gigs: Get Your Project Delivered by an Expert

Select from freelancers specializing in everything from database administration to programming, who have proven themselves as experts in their field. Hire the best, collaborate easily, pay securely and get projects done right.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
Not showing page correctly 3 40
webpage layout breaks when expanding bootstrap collapse component 8 24
Divi Them Help with Full Width header 20 60
Input box gone wrong 8 24
Creating a CSS block that only applies to printing By default, all of your CSS applies to every possible view of your page - whether on screen, printed, landscape, touch-screen, or whatever.  You can, however, add CSS that only applies under certai…
Introduction A frequently asked question goes something like this:  "I am running a long process in the background and I want to alert my client when the process finishes.  How can I send a message to the browser?"  Unfortunately, the short answer …
In this tutorial viewers will learn how add a scalable full-width header using CSS3. Create a new HTML document with an internal stylesheet. Set a tiled background.:  Create a new div and name it Header. Position it with position:absolute at the top…
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.

785 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question