Spanning CSS columns

[Adam]

Hi all,

I've got a tricky CSS problem that I could use some help with. What
I'm trying to do is to set up a column-based layout, with each column
holding a number of <divblocks. These div blocks can contain user
content, so it's not possible to know their height.

So far this is easy enough to achieve using absolutely positioned or
floated divs for the columns. The problem is that I want the div boxes
in the columns to be able to span 2 or more columns, without
overlapping boxes in other columns. Essentially I want to be able to
expand a div in column 1 and have it "push" the divs in column 2 out
of the way. Unfortunately, if I've used absolutely positioned divs to
model the columns, the content of those columns is removed from the
page flow, so the content will overlap. Can anyone think of a way to
do this?

Many thanks,
Adam

[dorayme]

In article
<69************ *************** *******@l42g200 0hsc.googlegrou ps.com>,
Adam <ad************ @gmail.comwrote :

Hi all,

I've got a tricky CSS problem that I could use some help with. What
I'm trying to do is to set up a column-based layout, with each column
holding a number of <divblocks. These div blocks can contain user
content, so it's not possible to know their height.

So far this is easy enough to achieve using absolutely positioned or
floated divs for the columns. The problem is that I want the div boxes
in the columns to be able to span 2 or more columns, without
overlapping boxes in other columns. Essentially I want to be able to
expand a div in column 1 and have it "push" the divs in column 2 out
of the way. Unfortunately, if I've used absolutely positioned divs to
model the columns, the content of those columns is removed from the
page flow, so the content will overlap. Can anyone think of a way to
do this?

The webpage is ticking along fine for a few days, there are three
columns and all the text in each col is happily there. Then suddenly, a
wide pic is introduced and the content of col 1 needs to be wider than
usual. OK, if it is a float, it will be wider and the col to the right
(unless abs positioned) will also be pushed right. What exactly is the
problem?

--
dorayme

[Adam]

On 4 May, 23:24, dorayme <doraymeRidT... @optusnet.com.a uwrote:

In article
<6975fbbe-7372-4064-866e-0116aa456...@l4 2g2000hsc.googl egroups.com>,

Adam <adampennycu... @gmail.comwrote :

Hi all,

I've got a tricky CSS problem that I could use some help with. What
I'm trying to do is to set up a column-based layout, with each column
holding a number of <divblocks. These div blocks can contain user
content, so it's not possible to know their height.

So far this is easy enough to achieve using absolutely positioned or
floated divs for the columns. The problem is that I want the div boxes
in the columns to be able to span 2 or more columns, without
overlapping boxes in other columns. Essentially I want to be able to
expand a div in column 1 and have it "push" the divs in column 2 out
of the way. Unfortunately, if I've used absolutely positioned divs to
model the columns, the content of those columns is removed from the
page flow, so the content will overlap. Can anyone think of a way to
do this?

The webpage is ticking along fine for a few days, there are three
columns and all the text in each col is happily there. Then suddenly, a
wide pic is introduced and the content of col 1 needs to be wider than
usual. OK, if it is a float, it will be wider and the col to the right
(unless abs positioned) will also be pushed right. What exactly is the
problem?

--
dorayme

Sorry, I don't think I was clear enough before. If I introduce a wide
pic into column 1 I don't want to push the whole of column 2 to the
right, I want to push the content of the column down. So column 2 will
stay where it is, but the div boxes inside column 2 should move out of
the way such that they are not overlapped by the wide box in column 1.
Having thought about it some more I'm not sure this is possible using
plain CSS, so I'm working on using JavaScript to check for overlapping
divs and move them after they have been placed. Any thoughts?

Thanks,
Adam

[Ben C]

On 2008-05-04, Adam <ad************ @gmail.comwrote :

Hi all,

I've got a tricky CSS problem that I could use some help with. What
I'm trying to do is to set up a column-based layout, with each column
holding a number of <divblocks. These div blocks can contain user
content, so it's not possible to know their height.

So far this is easy enough to achieve using absolutely positioned or
floated divs for the columns. The problem is that I want the div boxes
in the columns to be able to span 2 or more columns, without
overlapping boxes in other columns. Essentially I want to be able to
expand a div in column 1 and have it "push" the divs in column 2 out
of the way. Unfortunately, if I've used absolutely positioned divs to
model the columns, the content of those columns is removed from the
page flow, so the content will overlap. Can anyone think of a way to
do this?

The only way I can think of is to float: left all the div boxes and not
have any other divs for the columns, because for this to work, all of
the div boxes need to be in the same block formatting context.

Something like this:

div.left, div.right
{
float: left;
width: 15em;
height: 10em;
background-color: pink;
margin: 0.2em;
}

...

<div class="left">
</div>
<div class="right">
</div>
<div class="left" style="width: 30.4em">
</div>
<div class="left">
</div>
<div class="right">
</div>
<div class="left">
</div>
<div class="right">
</div>

Or you could use a table and colspan.

[dorayme]

In article
<af************ *************** *******@l42g200 0hsc.googlegrou ps.com>,
Adam <ad************ @gmail.comwrote :

On 4 May, 23:24, dorayme wrote:

Adam <adampennycu... @gmail.comwrote :

....What exactly is the problem?

Sorry, I don't think I was clear enough before. If I introduce a wide
pic into column 1 I don't want to push the whole of column 2 to the
right, I want to push the content of the column down. So column 2 will
stay where it is, but the div boxes inside column 2 should move out of
the way such that they are not overlapped by the wide box in column 1.
Having thought about it some more I'm not sure this is possible using
plain CSS, so I'm working on using JavaScript to check for overlapping
divs and move them after they have been placed. Any thoughts?

I see what you want now. A solution should be able to demo 3 cols and if
any wide material is introduced into col 1 or col 2 or col 3, this
material alone, not the whole column, should be able to intrude into col
2 or 3 or 2 (respectively). When so intruding, the content of the
invaded column should 'be aware' of the intrusion and reorganise its own
content above and below the invaded territory. And this must be a
dynamic situation.

My only thought is too difficult and I would look to some other design.
Like normal stuff: let one of the cols find its own width and that be
the col allowed for user additions.

--
dorayme