Solved

Vertical wrapping?

Posted on 2006-07-11
7
435 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

Highfive Gives IT Their Time Back

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

Join & Write a Comment

Suggested Solutions

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.
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …
In this tutorial viewers will learn how to embed custom externally-hosted Google Fonts using the Google Font API in CSS Go to the Google Fonts website at google.com/fonts: Browse or search based on font properties or name to find a suitable font for…

762 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

Need Help in Real-Time?

Connect with top rated Experts

19 Experts available now in Live!

Get 1:1 Help Now