Solved

Vertical wrapping?

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

Free Tool: SSL Checker

Scans your site and returns information about your SSL implementation and certificate. Helpful for debugging and validating your SSL configuration.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

Suggested Solutions

When applying CSS to your HTML, there are many different ways to select which element(s) the CSS applies to.  Some of these selectors are more commonly known and used than others - Here are the more common ones: #X - Matches an ID of X .X - Matche…
Introduction If you're like most people, you have occasionally made a typographical error when you're entering information into an online form.  And to your consternation, the browser remembers the error, and offers to autocomplete your future entr…
In this Micro Tutorial viewers will learn how to create a CSS image sprite (In a later tutorial, viewers will learn how to use CSS and HTML to create a navigation menu using this sprite) Open a new Photoshop document with a width of (Icon width)x(N…
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…

809 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