Velocity Reviews - Computer Hardware Reviews

Velocity Reviews > Newsgroups > Programming > HTML > Wrapping divs

Reply
Thread Tools

Wrapping divs

 
 
Nik Coughin
Guest
Posts: n/a
 
      02-28-2004
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


 
Reply With Quote
 
 
 
 
Els
Guest
Posts: n/a
 
      02-28-2004
Nik Coughin wrote:
> 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?

--
Els

Sonhos vem. Sonhos vo. O resto imperfeito.
- Renato Russo -

 
Reply With Quote
 
 
 
 
Paul Furman
Guest
Posts: n/a
 
      02-28-2004
Nik Coughin wrote:
> 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/inde...EN=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.

 
Reply With Quote
 
Nik Coughin
Guest
Posts: n/a
 
      03-01-2004
Paul Furman wrote:
> Nik Coughin wrote:
>> 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/inde...EN=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.


 
Reply With Quote
 
Nik Coughin
Guest
Posts: n/a
 
      03-01-2004
Els wrote:
> Nik Coughin wrote:
>> 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?


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.


 
Reply With Quote
 
Els
Guest
Posts: n/a
 
      03-01-2004

Nik Coughin wrote:
> Els wrote:
>
>>Nik Coughin wrote:
>>
>>>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?

>
> 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?



--
Els

Sonhos vem. Sonhos vo. O resto imperfeito.
- Renato Russo -

 
Reply With Quote
 
Paul Furman
Guest
Posts: n/a
 
      03-01-2004
Nik Coughin wrote:

> Paul Furman wrote:
>>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.


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.

 
Reply With Quote
 
 
 
Reply

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are Off


Similar Threads
Thread Thread Starter Forum Replies Last Post
swapping divs -- when divs NOT positioned absolutely.. maya Javascript 4 11-16-2007 05:11 PM
floating divs wrapping differently Matt Walker HTML 1 04-03-2007 06:22 PM
Managing divs within divs.... rich HTML 0 02-02-2006 07:38 PM
Way to stop DIVs from wrapping? Jeff Bowman HTML 5 04-16-2005 09:20 AM
Re: DIVs and overflow scroll bars S. Justin Gengo ASP .Net 0 07-18-2003 02:18 PM



Advertisments