Wrapping divs

[Nik Coughin]

I have two divs that live inside another div on my page.

The two divs are:

1) A collection of thumbnail images which is float: left
2) A column which is float: right.

Neither of them have any other positioning.

Legend: t=thumb, c=column.

This is how it looks when there is enough room horizontally for both the
thumbs and the column:

t t t c

When the number of thumbs gets high enough the right hand column moves down
underneath them:

t t t t
c

How can I make it so that the thumbs wrap onto the next line instead,
leaving the right hand column where it is:

t t t c
t

 

[Els]

I have two divs that live inside another div on my page.

The two divs are:

1) A collection of thumbnail images which is float: left
2) A column which is float: right.

Neither of them have any other positioning.

Legend: t=thumb, c=column.

This is how it looks when there is enough room horizontally for both the
thumbs and the column:

t t t c

When the number of thumbs gets high enough the right hand column moves down
underneath them:

t t t t
c

How can I make it so that the thumbs wrap onto the next line instead,
leaving the right hand column where it is:

t t t c
t

By giving the thumbs div a width?

 

[Paul Furman]

I have two divs that live inside another div on my page.

The two divs are:

1) A collection of thumbnail images which is float: left
2) A column which is float: right.

Neither of them have any other positioning.

Legend: t=thumb, c=column.

This is how it looks when there is enough room horizontally for both the
thumbs and the column:

t t t c

When the number of thumbs gets high enough the right hand column moves down
underneath them:

t t t t
c

How can I make it so that the thumbs wrap onto the next line instead,
leaving the right hand column where it is:

t t t c
t

Good question. I've got something similar happening here:
http://hills.ccsf.edu/~pfurma02/index.php?SCREEN=web-ref.php
but only in IE, Mozilla handles it fine. IE sometimes wraps the green
content box down below my float left menu (sometimes not).

Here's a simplified version:
http://www.edgehill.net/html/css/3.htm
Try resizing in IE to see the problem.

I use float: left to put my menu on the left with a set width. Then I
gave the right side a matching left margin to keep it from overlapping
the left menu. You might try that.

I can fix this simple one a couple of ways but not the real page. One
fix is to float: right then clear both for the lower menu. Another fix
is to make the lower menu wider than the two columns above. I used a
max-width (that can shrink) and that needs an IE workaround so maybe
that's the source of my problems where IE "sometimes" works.

 

[Nik Coughin]

Good question. I've got something similar happening here:
http://hills.ccsf.edu/~pfurma02/index.php?SCREEN=web-ref.php
but only in IE, Mozilla handles it fine. IE sometimes wraps the green
content box down below my float left menu (sometimes not).

I'm going to get a slap on the hand for this, but:

<table width="100%">
<tr>
<td> Thumbs DIV goes here </td>
</tr>
<tr>
<td> Right column DIV goes here</td>
</tr>
</table>

Bad table. Down boy.

 

[Nik Coughin]

By giving the thumbs div a width?

The column is fixed width, by necessity (it contains images of a fixed
size). I can't therefore accurately give the thumbs div a percentage width,
and a pixel width for it would break my flexible layout. I want as many
thumbs as will fit to go into that space.

 

[Els]

The column is fixed width, by necessity (it contains images of a fixed
size). I can't therefore accurately give the thumbs div a percentage width,
and a pixel width for it would break my flexible layout. I want as many
thumbs as will fit to go into that space.

So you have in mirrow view what lot's of sites have, which
makes me think:
column fixed width float:right, thumbs div
margin-right:width of column.
Doesn't work?

 

[Paul Furman]

I'm going to get a slap on the hand for this, but:

<table width="100%">
<tr>
<td> Thumbs DIV goes here </td>
</tr>
<tr>
<td> Right column DIV goes here</td>
</tr>
</table>

Bad table. Down boy.

I'm tempted. I had it working before though. The little test page, I
found at least three ways to make it function properly but the bigger
real pages are just refusing to behave.