Still celebrating National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17

x
?
Solved

Vertical wrapping?

Posted on 2006-07-11
7
Medium Priority
?
444 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
7 Comments
 
LVL 18

Accepted Solution

by:
Eternal_Student earned 336 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 332 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 332 total points
ID: 17112209
It sounds like you want something like this:
http://alistapart.com/articles/multicolumnlists
0

Featured Post

Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

Question has a verified solution.

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

Why do we like using grid based layouts in website design? Let's look at the live examples of websites and compare them to grid based WordPress themes.
Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
In this tutorial viewers will learn how to style rounded corners for elements in CSS using the border-radius property Begin with a normal styled element such as a div: To style all four corners of the div to be the same degree of roundness, use the …
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.
Suggested Courses

715 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