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.

Results 1 to 6 of 6
  1. #1
    Senior Member
    Join Date
    Mar 2010
    Posts
    104
    Member #
    21316
    Liked
    1 times
    Hi,

    I am struggling to Google this query and find any answers for what I need.
    I need to have divs floating in such a way that when they collapse beneath each other, they keep a consistant padding between the top and bottom div (regardless of the height).

    To understand what I am trying to explain, please see the image attached.

    Here is the CSS for the 3 column layout:

    Code:
    #primary {
        float: left;
        width: 223px;
        background-color:#111;
    }
    
    #content {
        float: left;
        width: 223px;
        background-color:#444;
    }
    
    #secondary {
        float: left;
        width: 223px;
        background-color:#777;
    }
    What do I need to do to get this effect? I've seen it on some websites before, so I know it's possible but with CSS only and no Javascript?

    Appreciate your help.
    Attached Images Attached Images

  2.  

  3. #2
    Senior Member Webzarus's Avatar
    Join Date
    May 2011
    Location
    South Carolina Coast
    Posts
    3,322
    Member #
    27709
    Liked
    770 times
    I understand what you're trying to do. And yes it can be done with CSS only.

    thanks for the picture, but to fully understand what you're looking to do, we need to know what the actual problem is.

    Looking at the portion of CSS you posted I would have to guess that the columns are collapsing underneath each other, but that may not be the case as I can't see all you CSS or how the HTML is structured

    For these kind of questions it would be more helpful to us, if the page were published somewhere, so we could see all the code involved.

    One side note... On the CSS you've posted, you don't have margins or paddings defined... Unless you're using a reset ... It's always best to define a margin and padding value, even if they are Zero, because if you don't, browsers will apply their default values... And it may not always be what you want it to be.

  4. #3
    Senior Member
    Join Date
    Mar 2010
    Posts
    104
    Member #
    21316
    Liked
    1 times
    You're right, my CSS example was poor!!
    Have a look at my example here:

    http://jsfiddle.net/KRhSV/

    You see, the divs don't collapse beneath as per my example attached.
    The divs that collapse below start at the lowest point of the largest height of the div above... I don't know if I'm been thick here but I can't think of a solution?

  5. #4
    Senior Member Webzarus's Avatar
    Join Date
    May 2011
    Location
    South Carolina Coast
    Posts
    3,322
    Member #
    27709
    Liked
    770 times
    Doesn't work on an iPhone

  6. #5
    Senior Member
    Join Date
    Mar 2010
    Posts
    104
    Member #
    21316
    Liked
    1 times
    Thanks for letting me know about that... I've taken some time to think about that layout and I've decided to stay away from it (3 columns) and keep the layout simple (one column) ... it's just more practical + less coding

  7. #6
    Senior Member Webzarus's Avatar
    Join Date
    May 2011
    Location
    South Carolina Coast
    Posts
    3,322
    Member #
    27709
    Liked
    770 times
    No, I couldn't see it on my iPhone...

    The layout works... But you didn't define any margins on your divs in your CSS

    If you want them to maintain the same spacing between the on the sides and top, when they collapse...

    Use margin: 10px 10px 0 0;


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
  •  

Search tags for this page

div float click collapse

Click on a term to search for related topics.
All times are GMT -6. The time now is 06:32 PM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com