CSS Panels - Trying to get them to fit into one another

Question

I am trying to get the panels I have created to "fit into" one another rather than forming a hard grid.

When there are multiples of these panels one one page, they do not line up and fall into each other to decrease white space. To see what I mean please visit my site: http://www.muhrsmustreads.com/

As you can see, occasionally there is quite a bit of space left unoccupied.

Here is an example of my index.html file:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Muhr's Must Reads</title>

    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet">
        <link href="css/my-styles.css" rel="stylesheet">

        <link href='http://fonts.googleapis.com/css?family=Arvo:400,700,400italic,700italic|Gudea:400,700,400italic' rel='stylesheet' type='text/css'>

        <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
        <!-- Navbar -->
        <div class="navbar navbar-inverse navbar-fixed-top">
            <div class="container">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand text-muted" href="index.html">Muhr's Must Reads</a>
                <div class="collapse navbar-collapse">
                    <ul class="nav navbar-nav navbar-right">
                        <li class="active"><a href="index.html">MMR</a></li>
                        <li><a href="archive.html">Archive</a></li>
                        <li><a href="http://twitter.com/muhrsmustreads">Twitter</a></li>
                    </ul>
                </div>
            </div>
        </div>
        <!-- End navbar -->


    <div class="container">

    <div class="row">
                <div class="col-sm-6">
          <div class="panel panel-default">
            <div class="panel-heading">
              <a href="http://vnty.fr/1xLALVi" target="_blank">
                                <h3 class="panel-title">
                                    Vanity Fair - Salvage Beast
                                    <span class="label label-primary">New</span> 
                                    <span class="label label-default">&gt; 15min</span>
                                </h3>
                            </a>
            </div>
            <div class="panel-body">
              With roughly 100,000 large merchant ships in the water at any time, scores sink, burn, break apart, run aground, or explode each year—often with toxic consequences. It is Captain Nick Sloane's job to board troubled vessels and salvage what he can. Against heavy odds, he recently refloated the doomed cruise ship Costa Concordia. William Langewiesche explains why Sloane may be the most valuable man on the seas ... Every ocean voyage involves risk. This has always been, and will always be. Currently about 100,000 large merchant ships sail the seas. If past patterns hold, during the next 10 years some 25,000 of them will be categorized as insurance casualties. Another 1,600 will be lost—roughly one ship every two and a half days. Some fraud is involved, but most of the losses are real. Though safety is said to be improving, it is evident that the oceans remain wild and will not soon be tamed. ... In that light one of the greatest seafarers at work today is neither a naval commander nor an old-salt merchant mariner but a certain marine salvage master with a taste for chaos and a genius for improvisation. He is a burly South African, aged 53, by the name of Captain Nick Sloane. His job is to intervene where other captains have failed, and to make the best of ships that are sinking, burning, breaking apart, or severely aground. Usually those same ships are threatening to leak bunker fuel—the sludge that powers them—along with crude oil or other toxins in quantities that could poison the environment for years to come. Sloane boards the ships with small teams—by helicopter from overhead, or by Zodiac from oceangoing tugs—and once he arrives he stays aboard and fights, sometimes for weeks at a stretch. ... He is tenacious in part because of the financial stakes involved. By well-wrought tradition, rescuers are not recompensed for saving lives at sea, but those who save a ship have a claim to a large part of its value, including its cargo. The final payout involves calculations not only of the ship's total value but also of the difficulty and danger involved in making the save. Today the payout is usually determined through Lloyd's of London, after the work is done, and on average amounts to perhaps 12 percent of the assessed value, except in disputed cases referred to arbitration, where the payout may climb higher. Such cuts amount to millions of dollars. On the other hand, expenses have to be paid out of pocket, and if the salvors fail to save the ship, they may win nothing at all—not even a thank-you for trying.
            </div>
          </div>
                </div>
                <div class="col-sm-6">
          <div class="panel panel-default">
            <div class="panel-heading">
              <a href="http://rol.st/1tcexuv" target="_blank">
                                <h3 class="panel-title">
                                    Rolling Stone - Xmas or Bust: The Untold Story of 'National Lampoon's Christmas Vacation'
                                    <span class="label label-primary">New</span> 
                                    <span class="label label-default">5-15min</span>
                                </h3>
                            </a>
            </div>
            <div class="panel-body">
              It started as a continuation of the misadventures of the Griswold family; it ended up becoming one of the most surprisingly popular and oft-quoted holiday movies of all time. This month marks the 25th anniversary of National Lampoon's Christmas Vacation, in which beleaguered patriarch Clark Griswold — played by the inimitable Chevy Chase — tries to engineer the picture-perfect seasonal festivities: the best naturally procured tree, the biggest and brightest (literally) Christmas-light display on the block, the end-of-the-year bonus from his Scrooge-like boss. It's the only comedy to appeal to those who live for that deck-the-halls spirit, viewers who are dyed-in-the-wool Grinches ("Well, I don't know what to say, except it's Christmas and we're all in misery") and folks who appreciate the genius of Randy Quaid in his underwear, exclaiming "Sh**ter's full!"... In honor of the film's quarter-of-a-century milestone, we've asked the cast and creators to weigh in on the seasonal classic. From the intricate planning behind the film’s zany antics to freak snowstorms and cast freak-outs, this is the untold, no-holds-barred story of Christmas Vacation.
            </div>
          </div>
        </div><!-- /.col-sm-6 -->
      </div
    </div>
    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="js/bootstrap.min.js"></script>
  </body>
</html>

Any help would be great, thanks!!

Answer 1 · 2014-12-30T05:13:24Z

December 30, 2014 5:13am

Masonry is easy to use and well-documented.

Here's a writeup on how to achieve a masonry layout without jQuery/JS: http://w3bits.com/css-masonry/

PS A closing div tag near the bottom of your HTML file is missing a >.

Welcome to the Treehouse Community

Looking to learn something new?

alexandermuhr

alexandermuhr

CSS Panels - Trying to get them to fit into one another

1 Answer

ptrkcsk

ptrkcsk

alexandermuhr

alexandermuhr