Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Page 1 of 2 1 2 LastLast
Results 1 to 10 of 13
  1. #1
    Junior Member
    Join Date
    May 2006
    Posts
    11
    Member #
    13239
    Ok, here's my problem - let's say i have 20 small div blocks following each other, all floated to the left - if the viewer changes the window size, the blocks go down or get up to not flow out of the window or not "wasting any space". the problem: these blocks have different heights (changed dynamically depending on the content in there), and if the blocks have to skip to the second line, the first of this line is positioned to the right of the last longer block in the line above, and the blocks following this "first of the second line" get to the 3rd line, all aligned. what i would like is to snap the blocks in the lines to the line above them (no margin-top:-xx since the boxes are dynamically changed) i don't think anyone will understand me right now, so here's the code of what i have now:

    <div style="float:left; width:150px; height:200px; background:#000000; margin:5px; clear:none;"></div>
    <div style="float:left; width:150px; height:260px; background:#000000; margin:5px; clear:none;"></div>
    <div style="float:left; width:150px; height:200px; background:#000000; margin:5px; clear:none;"></div>
    <div style="float:left; width:150px; height:220px; background:#000000; margin:5px; clear:none;"></div>
    <div style="float:left; width:150px; height:200px; background:#000000; margin:5px; clear:none;"></div>
    <div style="float:left; width:150px; height:200px; background:#000000; margin:5px; clear:none;"></div>
    <div style="float:left; width:150px; height:280px; background:#000000; margin:5px; clear:none;"></div>
    <div style="float:left; width:150px; height:200px; background:#000000; margin:5px; clear:none;"></div>
    <div style="float:left; width:150px; height:200px; background:#000000; margin:5px; clear:none;"></div>
    <div style="float:left; width:150px; height:200px; background:#000000; margin:5px; clear:none;"></div>
    <div style="float:left; width:150px; height:200px; background:#000000; margin:5px; clear:none;"></div>
    <div style="float:left; width:150px; height:200px; background:#000000; margin:5px; clear:none;"></div>

    and i'd like the blocks forced to the bottom to snap to the line above them.
    hope i made sense. any method (except margin-top) would be OK. but the valider the better. thanks

  2.  

  3. #2
    Senior Member Shani's Avatar
    Join Date
    Nov 2004
    Posts
    1,140
    Member #
    8171
    Not 100% clear on your question. May want to add an attachment of a diagram to demonstrate it.

    Next thing is I'm not sure how you expect to set the [minicode]margin: 5px[/minicode] and expect everything to be flush. Also, it would probably be better not to define the height if the height will be dynamic, or set it to auto.

    Essentially, as it's written above, if you have a div w/ 50px of content, there will be 150px (extra height) + 5px (margin-bottom of same div) + 5px (margin-top of next div) = 160px between content areas.
    Shani

    I have an eye for detail like you'd never believe.

  4. #3
    Junior Member
    Join Date
    May 2006
    Posts
    11
    Member #
    13239
    i though i was too confusing
    so this is what i have now: http://img490.imageshack.us/img490/1...itisnow3af.gif
    and this is what i want: http://img345.imageshack.us/img345/1...atiwant8wr.gif

    the margin between blocks next to each other are fine, i want to take out the margin between the rows. and the height i put in there is just for testing. this is not the final code. the block is gonna be a single .style

  5. #4
    WDF Staff mlseim's Avatar
    Join Date
    Apr 2004
    Location
    Cottage Grove, Minnesota
    Posts
    7,693
    Member #
    5580
    Liked
    717 times
    Are you going to always have the same number of blocks?

    I'm thinking that since the widths are the same, but the heights vary, if you
    know how many you will have in both directions (vertically and horizontally), you
    should build the columns of blocks vertically instead of horizontally.


  6. #5
    Senior Member Shani's Avatar
    Join Date
    Nov 2004
    Posts
    1,140
    Member #
    8171
    I was going to say the same thing.

    The problem right now is the second row is going beneath the lowest point of the top row, and the only way I know around that is to define columns. Either that or using a negative position-top, for the second row, but if the content is dynamic that will be bad.
    Shani

    I have an eye for detail like you'd never believe.

  7. #6
    WDF Staff mlseim's Avatar
    Join Date
    Apr 2004
    Location
    Cottage Grove, Minnesota
    Posts
    7,693
    Member #
    5580
    Liked
    717 times
    If you determine a fixed number of photos in a matrix, even if there are some
    blank ones ... just knowing how many will always be in the X direction and the
    Y direction ... it can be done.

    If the number of photos changes, especially in the vertical direction, then you'll
    have some problems.

    Let us know.


  8. #7
    Junior Member
    Join Date
    May 2006
    Posts
    11
    Member #
    13239
    You guys have any ideas how to make that work? Putting them in columns would take out the ability of it to move dynamically.

  9. #8
    WDF Staff mlseim's Avatar
    Join Date
    Apr 2004
    Location
    Cottage Grove, Minnesota
    Posts
    7,693
    Member #
    5580
    Liked
    717 times
    What do you mean by move them?

    Are you building the matrix from a database, or are you
    actually using some Javascript thing to move them?

    Or do you mean that you want them to move as the
    browser changes sizes?


  10. #9
    Junior Member
    Join Date
    May 2006
    Posts
    11
    Member #
    13239
    Quote Originally Posted by mlseim
    What do you mean by move them?

    Are you building the matrix from a database, or are you
    actually using some Javascript thing to move them?

    Or do you mean that you want them to move as the
    browser changes sizes?
    yes, i mean they move as the browser size changes. i made it float to the left so they just follow each other, and if it reaches the edge it just skips to the second row. my whole point is that this second row should snap up to the first row. it possible without overwhelming amount of scripts

  11. #10
    WDF Staff mlseim's Avatar
    Join Date
    Apr 2004
    Location
    Cottage Grove, Minnesota
    Posts
    7,693
    Member #
    5580
    Liked
    717 times
    I guess we should see that actual web page to experiment with it.
    Give us a link.



Page 1 of 2 1 2 LastLast

Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 10:09 AM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com