Likely impossible CSS problem

[parhelion]

I have a page with a number of divs with variable content in them.
They all have different lengths, but the same width.

All divs look like this:
<div class="foo">
Stuff<br>
Things<br>
Widgets<br>
Gadgets<br>
(varying number of rows)
</div>

[Moo]

These two people tell you why they don't think you should use CSS for layout:
http://www.flownet.com/ron/css-rant.html
http://blog.workaround.org/2009/03/17/d ... ge-layout/

I have no strong opinion on the matter, and unfortunately can't answer your asked question. I use tables for layout because I'm old and stubborn and know how to get just what I want with them. Using colspan and rowspan I'm sure you could create your look with just a bit of trial-and-error.

[parhelion]

I'm not aware of any solution to this with tables either though.

Tables would probably be the worst option for this, since this would be a "floaty" layout. What i'd like would be something like "clear:less than none" or something...

[Moo]

EDIT: ok, with your edit to your OP it is more clear now why my solution won't work, first version around I sort of missed the "variable content" bit.

OK I'll admit I can't quite get it with one table using rowspan (maybe someone else could), but it is easy enough to do by creating a table with two cells next to each other, and populate each cell with a table that has the rows you need. Not elegant, no, but it works exactly as desired. Here's the code. I've arbitrarily assigned widths and heights so when you run it, it displays exactly as your posted picture.

Spoiler:

Code: Select all

<div style="vertical-align: middle; text-align: center;">
    <table>
        <tr>
            <td>
                <table border="1">
                    <tr>
                        <td style="width: 100px; height: 100px">1</td>
                    </tr>       
                    <tr>
                        <td style="height: 150px">3</td>
                    </tr>       
                    <tr>
                        <td style="height: 100px">5</td>
                    </tr>       
                    <tr>
                        <td style="height: 100px">6</td>
                    </tr>       
                </table>
            </td>
            <td style="vertical-align: top;">
                 <table border="1">
                    <tr>
                        <td style="width: 100px; height: 150px">2</td>
                    </tr>
                    <tr>
                        <td style="height: 270px">4</td>
                    </tr>
                 </table>
            </td>
        </tr>
   </table>
   </div>

Here's how it displays:

Spoiler:

Tables.JPG (9.22 KiB) Viewed 1109 times

[jaap]

Not elegant, no, but it works exactly as desired.

Not entirely. With such a 2-column table you have to choose in which column each new section goes. I think parhelion wanted each following section to automatically go into the column that is shortest so far. I think that is impossible with just css and/or tables, and that the two-column table is the only reasonable solution.
[edit: or indeed the two div columns as mrbaggins pointed out below, which also has the same drawback of having to explicitly choose the column to put a section in.]

[mrbaggins]

If you want the same style using divs, do the exact same thing as the tables.

IE:
Two divs, one for each column (floated left and right respectively)
### divs, one for each cell in a column
One div to center everything and in the darkness, bind them

[b.i.o]

These two people tell you why they don't think you should use CSS for layout:
http://www.flownet.com/ron/css-rant.html
http://blog.workaround.org/2009/03/17/d ... ge-layout/

I might take them more seriously if either of them actually had a table-based layout on the page they're discussing.

Question: why does everything have to be floated left? If you're using some kind of server-side scripting to do your work it's an extra line of code in your HTML to figure out whether or not the number is even or odd and give them left or right floats because of that. If you're just working with a static HTML page you can do this manually without too much effort.

[Moo]

I might take them more seriously if either of them actually had a table-based layout on the page they're discussing.

The first link's layout is so simple it doesn't require any of the sort of layout he's talking about, and the second guy's using a standard Wordpress blog... I'm afraid I can't take your criticism very seriously either.

[parhelion]

The length of the divs varies greatly, so an "even and odd" approach would often produce very unbalanced columns.
It is indeed a dynamic page, so the manual approach doesn't work either.
I guess I'll have to write a script that counts the lines in each part and puts them in the proper column.

From what I've seen, CSS3 could handle this stuff, but of course it's not released yet...

[OOPMan]

Erm, I'm not too sure about the 2-column method not being too flexible without lots of scripting.

I mean, assume you've decided to output your content divs with a class indicating whether it should go in the left column or the right column.

I think a decent effect could be achieved by:

1: Output basic layout HTML

Code: Select all

<div id="pleasewait" style="display: none;"/>
<div id="master" style="display: none;">
  <div id="left"/>
  <div id="right"/>
</div>


2: Output basic content

Code: Select all

<div id="work" style="display: none;">
  <div class="left">Some stuff</div>
  <div class="right">Some other stuff</div>
  <div class="left custom">More stuff with extra styles</div>
</div>


3: Use jQuery to process...

Code: Select all

<script type="text/javascript">
function doLayout()
{
  jQuery(function($)
  {
    $('#master').fadeOut('fast', function() { $('#pleasewait').fadeIn('fast'); });
    $('#left').html($('#work.left').html());
    $('#right').html($('#work.right').html());
    $('#pleasewait').fadeOut('fast', function() { $('#master').fadeIn('fast'); });
  });
}
doLayout();
</script>


That doesn't involve too much code and all the DOM thunking is hidden from the user (A pleasant
little "Please Wait, Building Page" animation would work ) until said DOM thunking is done.

If you decide you want to be able to update on the fly it works decently as well as all that's
required is something along the lines of:

Code: Select all

<script type="text/javascript">
jQuery(function($)
{
  $('#work.left').html(content);
  $('#work.right').html(content);
  doLayout();
});
</script>


Content being whatever you want, however it gets there...

[wing]

I never thought I'd recommend this particular technique because it has so much potential for creating horrible abuses of the eye, but check out CSS3 Multicolumn. Of course, it's not finalized yet, but Opera, Chrome, Safari, and Firefox all support it (along with possibly IE8) - but you dump IE6 and IE7 out the window (which is always a good plan IMHO)

[didroe]

You can do it with a fairly minimal javascript by starting with the float approach and just pulling up things in the left hand column to close the gaps.

Code: Select all

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
  <style type="text/css">

#container {
  width: 100px;
}

.box {
  float: left;
  width: 48px;
  border: 1px solid black;
}

.small {
  height: 50px;
}

.medium {
  height: 120px;
}

.large {
  height: 180px;
}

.clear {
  clear: both;
}

  </style>
</head>
<body>
  <div id="container">
    <div class="box small">1</div>
    <div class="box medium">2</div>
    <div class="box medium">3</div>
    <div class="box large">4</div>
    <div class="box small">5</div>
    <div class="box small">6</div>
    <span class="clear"></span>
  </div>

  <script type="text/javascript">

var boxes = document.getElementById('container').getElementsByTagName('div');

// We know that the first box is always in the first column. We store
// it's left offset to find all other boxes in this column.
var firstColOffset = boxes[0].offsetLeft;
// Keep track of the relative height difference of the columns
var offset = 0;

// Pull up boxes in the left column to remove gaps
for (var i = 0; i < boxes.length; i++) {
  var box = boxes[i];

  // If it's in the first column
  if (box.offsetLeft == firstColOffset) {
    // Pull up the box if neccessary
    box.style.marginTop = offset + 'px';
    offset += box.offsetHeight;
  } else {
    offset -= box.offsetHeight;
  }
}

  </script>
</body>
</html>


[Gordon]

Can't you just do this?

Subsequently you could swap the <p>'s for <div>'s and throw <br / >'s between them.

[OOPMan]

That looks right

[didroe]

Can't you just do this?

If you can determine ahead of time how big everything is then yes. Otherwise you're going to need some javascript to work out which column everything needs to go in. With my approach I let the browser do most of that and just remove the gaps in the left hand column.

[You, sir, name?]

Would it really be -that- much scripting? Seems like it would be pretty easy to do with pretty basic DOM skills. You can probably add some dummy element at the bottom of each column and use the position of that to determine which column has the most space. But I don't know, maybe there's some hindrance I'm not seeing.

[didroe]

That's effectively what my example above does. Although instead of fiddling around keeping track of the columns and deciding which one to put an element in, it makes use of the browser's float behaviour.

I create a container which is big enough to fit two elements side by side and then float everything left. This looks like the second image in the first post. I then iterate over the elements looking for things in the left hand column and keeping track of the relative differences in column heights. I then pull elements up by setting a negative top margin which causes the browser to re-flow the following elements, possibly moving some more into the left column (eg. element 6).

It wouldn't be that hard to manually do all of that by calculating all the sizes and putting each element in a right/left div but why bother when the browser can do most of it for you?