3,237
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.
Expand|Select|Wrap|Line Numbers
- <!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>
