Arranging a tight grid of floating divs with varying heights

When creating a grid using floating divs of varying height, the divs that carry over into the next row often find themselves in the second or third column rather than going immediately below the first div in the first column. I'm curious how I could make them fill in each column. I've attached some photos to better exemplify this.
Currently the first div in the second row is only moving into the 4th column do to the varied heights of the divs in the first row.
I'd like to have the divs look like this:

Division-itis. You don't need to place each thumbnail inside it's own floated division. Why not just insert the thumbnail images into a single container like so?
<div id="thumbnails" style="width:900px">
Image here, image here, image here, etc...
</div>
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
www.alt-web.com/
www.twitter.com/altweb

Similar Messages

Floating divs of different heights

I have a layout that a client requires that is 3 columns wide
I am trying to set it up with floating divs and the divs have different heights.
What is the best way to lay this out and is it possible to use Edge Reflow to do this as when I lay out the divs at my starting resolution and then start to change it for media queries the divs move from their starting positions.
Hope it clear what I'm trying to achieve.
Would I be better using Dreamweaver to do this than edge reflow?

I think you are expeciencing someting similar to this user's post:
http://forums.adobe.com/message/5542351#5542351
We are looking at solutions, and it definitely helps us to understand how users experience the problem.

Need help with floating div's and clear property

Link to page
Link to CSS file
I have the website currently setup as a 3 column website and everything is working fine. I need to make some pages as a 2 column page with the left column having several "leftcolumn" div's stacked on top of each other so that there are several rounded box sections in the left column.
I have the leftcolumn div floated left with a clear left to get the left column div's to stack on top of each other.
The rightcolumn is floated right.
How do I get my right column to align with the top of the first leftcolumn div?

It's not always necessary to float every column. One float is usually enough for a 2-column layout.
Where you have this:
#rightcolumn {
    width: 620px;
    float: right;
    color: #FFFFFF;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    color: #FFFFFF;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    padding: 10px;
    border:3px solid #5f605f;
    -moz-border-radius:20px;
    -webkit-border-radius:20px;
    -opera-border-radius:20px;
    -khtml-border-radius:20px;
    border-radius:20px;
    background-color: #858586;
    font-size: 12px;
    margin: 10px;
Change it as follows:
#rightcolumn {
/**REMOVE ALL THIS**/
    width: 620px;
    float: right;
    color: #FFFFFF;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    color: #FFFFFF;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    padding: 10px;
    border:3px solid #5f605f;
    -moz-border-radius:20px;
    -webkit-border-radius:20px;
    -opera-border-radius:20px;
    -khtml-border-radius:20px;
    border-radius:20px;
    background-color: #858586;
    font-size: 12px;
/**REMOVE THIS**/
    margin: 10px;
/**ADD THIS**/
    margin-left: 350px; /**adjust as needed**/
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
http://alt-web.com/
http://twitter.com/altweb
Message was edited by: Nancy O.
Strikethroughs are not working in the forum. I edited the code to make more sense.

Issues with floated DIV layout

Hi I am having problems with my floated DIV layout on the following site in I.E 6/7 but not 8.
I have tried display: inline thinking it may be a margin/padding issue?
http://www.sopasbeauty.co.uk
what am I doing wrong, should I be adding clearfloats to separate area's of the page??
Mark

First, open the page in DW and use FILE | Convert > XHTML 1.0 Transitional. Then try changing this -
<div class="boxes" id="box1">
<h1>Acrylic Nails</h1>

Floated DIV alignment woes

I have created 9 left-floated DIV 3 a row with the last div of the first row taller than the first two, how can i make the first two div of the second row occupy the space on top of them instead of aligning to the bottom of the 3rd div in the first row.

It's difficult to envision your layout, considering a float left on 9 divs should have the effect of aligning them next to one another, from left to right, like so: http://www.webmagi.com/Tests/Floating-Divs.htm
Dreamweaver leaves much to be desired with regards to visually working with CSS based layouts. You might look into Stylizer 5 for this: http://www.stylizerapp.com/ (Great video intros)

Why is the length of a floated div ignored by the outer wrapper?

I'm having a hard time understanding whether floated elements are relatively or absolutely positioned.
When I do a "float:right" on a narrow column, the text outside that column seems very aware of its existence. It won't appear under it - it will instead wrap around it. It will make room for it.
However, the outer wrapping div ignores the floated div completely. It will only take into account (and accomodate for) whatever amount of text is NOT in that inner floating div.
Example :
<div class="wrapper">
<div style="float:right">
Float right contents.
</div>
This is the content that isn't floating right.
</div>
If the right-floated contents are longer than the content that isn't floated right, the outer wrapper ignores it. It will only accomodate the text that isn't being floated. If the floated text exceeds the non-floating text, the floating text will bleed outside the outer wrapper.
How do I make the outer wrapper accomodate the right-floated div as well?

I'm having a hard time understanding whether floated elements are relatively or absolutely positioned
Neither. Floats are floats. The take content out of the normal flow. For this reason, you must clear floats after they are no longer needed. I typically use a br, p or hr tag with a clearing class like so:
CSS:
.clearFloat {clear:both; height 1px; visibility: hidden}
HTML:
<hr class="clearFloat" />
Floats and Margins Demo.
http://alt-web.com/DEMOS/3-CSS-boxes.shtml
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
http://alt-web.com/
http://twitter.com/altweb

Floating divs

Hey TLF team,
Do you have any immediate plans to implement floating blocks instead of just floating images? I am currently implementing a stop-gap measure that splits the input up into multiple blocks, renders each to a different textflow, then lays them out on the page, but obviously this isn't optimal and if you guys are on the verge of implementing floating divs then I'll hold off!
The reason I ask this is that I noticed that Jin Huang posted 'We are implementing border feature and backgroundColor of "block element" now', which suggests that you might be implementing other block features too...
To confirm I am talking about the kind of block floats that would allow layouts similar to:
http://www.maxdesign.com.au/articles/css-layouts/two-fixed/
to be created in a single text flow.

Thanks for your reply - in that case I shall continue with my original plan. It would be really cool if you guys could add this feature at some point as when you have a lot of floating divs as seperate TextFlows on the screen at once things can get slow and it would be nice if this was handled within a single TextFlow.
Congratulations on your work on TLF so far!

Background div do not support floating divs

I've created quite simple construction, but it doesn't work in way I want to.
I have wrapper which do not wrap up the floating divs placed in it as it should -
it shrinks to base size (top and bottom corners) and stays like that while floating substances maintain previously defined positions - only without background...
Any suggestions how to fix this?
The construction looks round about like this:
<body>
<div> div tag with height: 5px; contains top corners for layout </div>
<div class= "opened div tag with backround attributes (color and borders)">
         <div>here comes the floating content (list with style set to: none;)
               I set it inside the div with background attributes to have floating content wrapped into background color and borders
        </div>
</div (here i close "background wrapper")>
<div> div tag with heightL 5px; contains bottom corners for layout </div>
</body>
Thanks.

This is a bit of a shot in the dark but try overflow: hidden; in the CSS rule for your wrapper?
It would be much easier to see the page.
Martin

* CCS question: float interfering with bg colour?

Hi,
I've been having a bit of trouble with my CSS ad was
wondering if anyone had suggestions.
Currently i have a
"Main content" div with 2 divs inside it. When i add float
left to the 1st inner div the background colour of the main content
div goes away and it becomes transparent which doesn't work for my
design. If i don't use float left the 2nd inner panel stays below
the 1st and does't come up to be next to the first like i want.
Any suggestions
Also all parts of my page are inside the bigger the
"container" div, if that makes any difference.
Cheers.

>When i add float left to the 1st
> inner div the background colour of the main content div
goes away
Clear the float. (Look up "clear" in your CSS reference if
you don't
understand.)
Walt
"taz-e" <[email protected]> wrote in message
news:gc1pcu$sfj$[email protected]..
> Hi,
> I've been having a bit of trouble with my CSS ad was
wondering if anyone
> had
> suggestions.
> Currently i have a
> "Main content" div with 2 divs inside it. When i add
float left to the 1st
> inner div the background colour of the main content div
goes away and it
> becomes transparent which doesn't work for my design. If
i don't use float
> left
> the 2nd inner panel stays below the 1st and does't come
up to be next to
> the
> first like i want.
>
> Any suggestions
> Also all parts of my page are inside the bigger the
"container" div, if
> that
> makes any difference.
> Cheers.
>
>

Using CSS and Javascript to display a div with flash in it, mozilla reloads the flash file!

I am using CSS and Javascript to display a div with an
embedded flash object in it. Mozilla Firefox reloads the flash file
when the div is displayed! (I dont want this to happen, as it's
unexpected functionality, my expectation would be that the flash
file would not change it's state at all, and would remain in
whatever state it was left in.)
I was wondering if anyone has come across this issue and is
there something I can do to prevent this from occurring?
To be more specific, I have a single HTML page with 8 flash
files embedded in it (yeah I know, it's a bit much). I am then
using CSS and Javascript to display (via a numbered link (with an
id)) an equivalent numbered div tag containing the flash file.
Mozilla Firefox reloads the flash object that is in the div.
Internet Explorer will not do this and will instead, load the flash
object only upon initial view of the flash object. All subsequent
links (in IE) will NOT reload the flash object on the page. I'm
guessing this is some kind of difference in the flash player as an
Active X object and the plugin, or is it just IE being clever? Or
am I way off?
Anyway, here is the code...

I am using CSS and Javascript to display a div with an
embedded flash object in it. Mozilla Firefox reloads the flash file
when the div is displayed! (I dont want this to happen, as it's
unexpected functionality, my expectation would be that the flash
file would not change it's state at all, and would remain in
whatever state it was left in.)
I was wondering if anyone has come across this issue and is
there something I can do to prevent this from occurring?
To be more specific, I have a single HTML page with 8 flash
files embedded in it (yeah I know, it's a bit much). I am then
using CSS and Javascript to display (via a numbered link (with an
id)) an equivalent numbered div tag containing the flash file.
Mozilla Firefox reloads the flash object that is in the div.
Internet Explorer will not do this and will instead, load the flash
object only upon initial view of the flash object. All subsequent
links (in IE) will NOT reload the flash object on the page. I'm
guessing this is some kind of difference in the flash player as an
Active X object and the plugin, or is it just IE being clever? Or
am I way off?
Anyway, here is the code...

Problem with minimal height of components that renders as DIV in FF

I noticed this when I wanted to put af:spacer with height less then 10px.
In panelGroupLayout (property layout set to vertical) I wanted to set vertical spacing
between images to 5px. af:spacer that renders as img (width:1px / height:5px) was in DIV
which hed height of minimal 13px.
In IE7 everything is OK, but IE7 is not an option.

SOVIET,
In the latest build using FireFox 2.0.0.6 the af:spacer renders as follows which is as it is designed to do. Therefore, the issue is no longer present within the product. Thanks for your tremendous attention to detail.
Regards,
Ric
For a height of 5 and width of 10 the af:spacer renders:
<div><img id="spacer1" src="/testcase-testcase-context-root/adf/images/t.gif" alt="" width="10" height="5"/></div>For a height and width of 10 the af:spacer renders:
<div><img id="spacer1" src="/testcase-testcase-context-root/adf/images/t.gif" alt="" width="10" height="10"/></div>For a height of 5 and width of 0 the af:spacer renders:
<div><img id="spacer1" src="/testcase-testcase-context-root/adf/images/t.gif" alt="" width="0" height="5"/></div>For a height 10 and width of 0 the af:spacer renders:
<div><img id="spacer1" src="/testcase-testcase-context-root/adf/images/t.gif" alt="" width="0" height="10"/></div>

Space between DIV with image and DIV with image background

I have just about finalized the new design on my website. The only issue I am having now is on the gallery page. There is a thin space between a DIV with an image and DIV with an image background. I am using these DIV's to give the illusion of a blue border. If you look at any of the other main pages on the site the space is not there. Any ideas?
http://liquidfirefishing.com/index.php
http://liquidfirefishing.com/gallery/main.php
Here are a couple of screenshots to show exactly what I mean.

Hello,
both my "IE8" and my "FF 7.01" show the blue boundary lines. Here my screenshots, left side IE8, right side FF:
Header 1
Header 2
Hans-Günter

Floating Fields with Designer ES2

I just did an upgrade to Designer ES2.
I created a new form with static textfields and floating textfields
then i created a button that filles the floating field with a text using javascript.
xfa.resolveNode("form1.#subform[0].Textfield1").rawValue
= "it doen't work";
But it doesn't work
When i make the floating field visible, so i see the normally hidden field, the i see that the script works, but that te tekst doesn't show in my static textfield
Anyone else with this problem?
Can anyone tell me what i'm doing wrong?
In the previous Designer ES it worked fine and opening those forms in ES2 still work
But creating a new form with a floating text doesn't work

I reinstalled Both Designer 8.x and ES2 several times, but i have the same problem with both versions.
Now i only have Designer 8.x installed on my WinXP.
i created a new empty form and add a static text field and a button.
within that static textfield i insert a floating field.
i add a Formcalc script to the click function of the button: Field.rawValue = "hello"
i save it as a dynamic form.
preview the form and when i click the button nothing happens
Then i change the presence of the floating field to visible, so a normally hidden field is visible
Now without changing anything i preview the document en click on the button
Now i see the text in the field i just made visible, but still not in the static textfield where i inserted that floating field.

Floating divs made to have equal heights

Hi all
Is there a CSS way to get two divs (that will have different
lengths of
text) to have the same height. If not CSS what other
techniques are there to
achieve this - or is it not possible
Thanks
B
http://www.visit-the-coqui.com
If you are thinking of a vacation to Puerto Rico
http://www.thegadgettraveler.com
Travel gadget and other news here

Thanks Osgood - I did not think of the faux column option and
using it for
divs - I'll check that out - thanks
Thanks for the P7 link too
B
http://www.visit-the-coqui.com
If you are thinking of a vacation to Puerto Rico
http://www.thegadgettraveler.com
Travel gadget and other news here
"Osgood" <[email protected]> wrote in
message
news:gbg62d$14n$[email protected]..
>B wrote:
>> Hi all
>>
>> Is there a CSS way to get two divs (that will have
different lengths of
>> text) to have the same height. If not CSS what other
techniques are there
>> to achieve this - or is it not possible
>>
>> Thanks
>>
>
> You can use javascript, read this article about eqaul
height columns
>
>
>
http://www.projectseven.com/tutorials/css/pvii_columns/index.htm
>
>
> or you can wrap the two floated <divs> in another
<div> and use a
> repeating background image, google 'faux columns'

WMA Player Plug-in in Floating DIV

Here is a 'test' page that I've created:
http://www.justus.ca/test/vocab/professions.html
It has a 'floating' Windows Media Play plug-in within a
floating div at the
upper left of the screen. I can not get it to play, so I
copied the player
and pasted it into the first cell of the table as a 'test'.
That player
plays fine. It is an exact duplicate of the player in the
floating div
other than where it is located. Can anyone tell me how I can
get the
floating player to work? I want the player to stay fixed on
the screen
while people scroll the page to follow the audio being
played.

Try using this website
http://cit.ucsf.edu/embedmedia/
Note its easily to test an online media file then a local
media file I find.
For online files you can simply type the web address into the
media player script
for local file it has to be something like this src=file://
etc..
not just src=file.mp3
so try to upload you music or video file onto the internet
then
use the generator on the website
easy peasy
Bookmark it its the best around....
Daniel Lee
| CEO - Lead Developer
| Developer Trainer
|
http://www.onemegamarket.com

Arranging a tight grid of floating divs with varying heights

Similar Messages

Maybe you are looking for