Geek Answers Handbook

Can I move divs down the page and not through it?

If I have a collection of div elements, I can use CSS so that they flow through the page and overflow to the next line.

Here is a simple example:

<html> <head> <title>Flowing Divs</title> <style type="text/css"> .flow { float: left; margin: 4em 8em; } </style> </head> <body> <div class="container"> <div class="flow">Div 1</div> <div class="flow">Div 2</div> <div class="flow">Div 3</div> <div class="flow">Div 4</div> <div class="flow">Div 5</div> <div class="flow">Div 6</div> <div class="flow">Div 7</div> <div class="flow">Div 8</div> </div> </body> </html>

Is it possible for divs to flow down the page, and not over it, that they flow down the columns not along the lines, but still occupy the same space as if they flowed?

So, for the example above, if they flowed in two rows of four divs, could I get the first column containing Div1 and Div2 instead of Div1 and Div5?

+7
css css-float
source share
4 answers

Quickly threw it together:

 #column1 {float:left} #column2 {float:left} div div{height:100px;width:100px;border:1px solid} <div id="column1"> <div>1</div> <div>2</div> </div> <div id="column2"> <div>3</div> <div>4</div> </div>
+1
source share

No, It is Immpossible. The simplest workaround is to create separate columns by adding DIV covers, and then adding content to each column. It could also be dynamically generated either using Javascript or from the server.

+2
source share

No, you cannot, but you can organize them however you want using absolute positioning. However, this means that you must explicitly state the position of each element, and this is usually undesirable.

A simple markup setup can do the job. Is the next thing you wanted to see?

 <html> <head> <title>Flowing Divs</title> <style type="text/css"> .container { float:left; } .flow { margin: 4em 8em; } </style> </head> <body> <div class="container"> <div class="flow">Div 1</div> <div class="flow">Div 2</div> <div class="flow">Div 3</div> </div> <div class="container"> <div class="flow">Div 4</div> <div class="flow">Div 5</div> <div class="flow">Div 6</div> </div> <div class="container"> <div class="flow">Div 7</div> <div class="flow">Div 8</div> </div> </body> </html>
+1
source share

Unfortunately this cannot be done in pure html / css. Below is an example of how this can be done in javascript. This can be made more effective, but harder to learn. I have not tested in IE / Safari, but it works in FF.

How to use: - Add a class container to the stream container - thats it

Enjoy :).

 <html> <head> <title>Flowing Divs</title> <style type="text/css"> .container { float: left; height: 1px; } .col { float: left; } #container-1 { } .flow { float: left; margin: 4em 8em; width: 200px; height: 100; overflow-y: hidden; } </style> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js"></script> </head> <body> <div id="container-1" class="container"> <div class="flow">Div 1</div> <div class="flow">Div 2</div> <div class="flow">Div 3</div> <div class="flow">Div 4</div> <div class="flow">Div 5</div> <div class="flow">Div 6</div> <div class="flow">Div 7</div> <div class="flow">Div 8</div> <div class="flow">Div 9</div> <div class="flow">Div 10</div> <div class="flow">Div 11</div> <div class="flow">Div 12</div> <div class="flow">Div 13</div> <div class="flow">Div 14</div> </div> <script type="text/javascript"> /** * Setup some event handling and stuff */ // Create flowing container after dom is populated $(document).ready(function() { createFlowingContainer('#container-1'); }); $(window).resize(function() { // Recreate flow for all containers without fixed heights $('.container-autosize').each(function(i, container) { var container = $(container); // Update container dimenions container.height($(window).height()); createFlowingContainer(container); }); }); /** * Magical function */ createFlowingContainer = function(container) { var container = $(container); // Columns counter var colNum = 0; // Some more counter vars, these reset when a new column is created var colHeight = 0; var colWidth = 0; var containerWidth = 0; var itemNum = 0; // Get height of container var containerHeight = container.height(); // Has the container height been defined? 1px is the default height (as defined in the css) if (containerHeight == 1) { // Set the container height default value containerHeight = $(window).height(); // Used to resize container on window resize events container.addClass('container-autosize'); // Update container height container.height(containerHeight); } var containerElements = container.children('div :not(.col)'); if (containerElements.length == 0) { containerElements = $('[itemNum]'); } else { container.children('div').each(function(i, o) { $(o).attr('itemNum', itemNum); itemNum++; }); } var containerTmp = container.clone(); containerTmp.html(''); containerElements.each(function(i, ele) { var ele = $(ele); // Get the item height with padding & margins included var eleWidth = ele.width(); var eleHeight = ele.outerHeight(true); // Can the current column fit this item? if ((eleHeight + colHeight) > containerHeight) { // Reset calculated height of column & advance column pointer colHeight = 0; colNum++; } // Get the column container var column = containerTmp.find('.col-' + colNum); // Does the column exist? If not, its a new column and we'll need to create it if (column.length == 0) { column = $('<div class="col col-' + colNum + '"></div>'); // Append column to container containerTmp.append(column); } // Keep track of widest ele in column, used for setting width of container if (eleWidth > colWidth) { colWidth = eleWidth; } column.width(colWidth); // Increment the calculated column height colHeight += eleHeight; // Append element to column column.append(ele); }); container.html(containerTmp.html()); // Calculate container width container.children('.col').each(function(i, o) { containerWidth += $(o).width(); }); container.width(containerWidth); }; </script> </body> </html>
0
source share

More articles:


All Articles