How do I stack divs vertically?

Collapse
X
 
  • Time
  • Show
Clear All
new posts
  • Motoma
    Recognized Expert Specialist
    • Jan 2007
    • 3236

    How do I stack divs vertically?

    Hello all!

    My end goal is to create an HTML layout that will expand and contract with the window size, while maintaining a variable number of content columns.

    In the example below, you will see that if you stretch the browser window until there is two columns, divs on the right stack flush with each other vertically; however, divs on the left also stack flush with the divs on the right, leading do some gaps in the layout. The layout is further exacerbated when the window is expanded to more columns (add more divs to see this happen).

    If someone knows of a way that I can get all divs to cutely stack below each other, while maintaining the liquidity of this layout, and accomplishing this all with each container styled uniformly, I would greatly appreciate it.

    Thanks in advance,
    Motoma.

    [code=html]
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>A quick example of my issue</title>

    <style type="text/css">
    body
    {
    margin: 0em auto;
    width: 85%;
    background: #204364;
    font-family: verdana;
    }

    div
    {
    margin: 0.3em;
    padding: 0.3em;
    float:left;
    width: 25em;
    border: 1px gray dashed;
    background: #ffffff;
    }
    </style>

    </head>

    <body>
    <div>
    <p>This div has only one entry</p>
    </div>
    <div>
    <p>This div has a couple items</p>
    <p>This div has a couple items</p>
    </div>
    <div>
    <p>This div has a couple items</p>
    <p>This div has a couple items</p>
    </div>
    <div>
    <p>This div has only one entry</p>
    </div>
    <div>
    <p>This div has a lot to say!</p>
    <p>This div has a lot to say!</p>
    <p>This div has a lot to say!</p>
    </div>
    <div>
    <p>This div has only one entry</p>
    </div>
    </body>
    </html>
    [/code]
  • Motoma
    Recognized Expert Specialist
    • Jan 2007
    • 3236

    #2
    Partial solutions also accepted!

    Comment

    • drhowarddrfine
      Recognized Expert Expert
      • Sep 2006
      • 7434

      #3
      Yep. It does that.

      As you probably know, all those elements are block level and browsers will try and keep everything stacked on top of each other. Floating one removes it from the normal flow but the space for the non-floated blocks is maintained which is what is causing the gaps.

      There are a couple of elegant solutions that I've seen but I'd have to look them up. I tend to create documents and stuff them in a folder with hundreds of others so that may take a while.

      The first uses javascript and I might be able to find the link to that fairly quick. The second I don't recall and might take longer to find.

      In either case, let me know if the js solution is acceptable.

      Comment

      • drhowarddrfine
        Recognized Expert Expert
        • Sep 2006
        • 7434

        #4
        Found the javascript solution.

        Comment

        • Motoma
          Recognized Expert Specialist
          • Jan 2007
          • 3236

          #5
          Are you suggesting that I should, on resize, rearrange each div into the appropriate number of colunms?

          That's a terrible hack, and it introduces the problem of measuring the heights of each element to get evenly tall columns.

          Comment

          • drhowarddrfine
            Recognized Expert Expert
            • Sep 2006
            • 7434

            #6
            Your original post sounds like that's exactly what you're trying to do so I guess I don't understand.

            Comment

            • Motoma
              Recognized Expert Specialist
              • Jan 2007
              • 3236

              #7
              Yeah, I was hoping for some sexy CSS that would do the work for me :)

              Comment

              Working...