Search code examples
htmlcssasp.netlayoutmasonry

HTML masonry layout issues (asp.net)

For my site I am trying to include masonry to get content to lay out nicely but I am getting very odd results so far. Here is my code:

<div class="col-xs-12 col-sm-6 col-md-4 col-lg-3 well well-sm news-box" style="background-color:@color" 
     data-masonry='{ "columnWidth": ".masonry-container", "itemSelector": ".masonry-container" }'>
    <div class="masonry-container">
        <div class="contain">
            <img src="@w.Image" class="image img-responsive" />
            <div class="middle">
                @getReferrals(w.Id)
            </div>
        </div>
        <h4>@w.Title</h4>
        <p>@w.Body</p>
    </div>
</div>

As you can see the outer is the one that has the masonry quality. I am not using jquery because I can't get it working, HTML at least gives me (wrong) results. Anyways, the result is this holy mess: enter image description here

Something else: this content is inside bootstrap tabs. I tested it outside of them and it worked just fine but inside it's giving me problems.

Please help me if you can! Thanks in advance....

Solution

  • Whenever using masonry just make sure you are putting the rules at the row level and aiming for the columns, if not the layout will be odd.