Prev: proper and portable way to group elements
Next: Problem with CSS Horizontal Dropdown Menu
From: Adam on 4 May 2008 12:54
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 <div> blocks. 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
From: dorayme on 4 May 2008 18:24
In article
<6975fbbe-7372-4064-866e-0116aa456e31(a)l42g2000hsc.googlegroups.com>,
Adam <adampennycuick(a)gmail.com> wrote:

> 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 <div> blocks. 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
From: Adam on 5 May 2008 06:55
On 4 May, 23:24, dorayme <doraymeRidT...(a)optusnet.com.au> wrote:
> In article
> <6975fbbe-7372-4064-866e-0116aa456...(a)l42g2000hsc.googlegroups.com>,
>
>
>
> Adam <adampennycu...(a)gmail.com> wrote:
> > 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 <div> blocks. 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
From: Ben C on 5 May 2008 16:43
On 2008-05-04, Adam <adampennycuick(a)gmail.com> wrote:
> 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 <div> blocks. 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.
From: dorayme on 5 May 2008 18:29
In article
<af0fccc1-ba0c-4261-a9dd-30c815a1dd53(a)l42g2000hsc.googlegroups.com>,
Adam <adampennycuick(a)gmail.com> wrote:

> On 4 May, 23:24, dorayme wrote:

> > Adam <adampennycu...(a)gmail.com> wrote:
....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
 | 
Pages: 1
Prev: proper and portable way to group elements
Next: Problem with CSS Horizontal Dropdown Menu