Home/ Questions/Q 9163083
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-17T14:21:35+00:00

I have 3 divs inside a main div as marked up in the HTML

  • 0

I have 3 divs inside a main div as marked up in the HTML /CSS code below, when the page renders, the second div is twice as large as the first and last. When the page renders, because the second div is twice the size of the first and last, this causes the last div to display below the second, leaving a gap inbetween. What I want is that the third div occupies that gap that:

<html>
<head>
<title>Liquid Divs</title>
<style>

#splash {
    width: 600px;
    margin: 1px;
    border: solid 1px #ccc;
}

.box {
    width: 196px;
    height: 196px;
    margin: 1px;
    border: solid 1px #ccc;
    float: left;
}

.box2 {
    width: 392px;
    height: 392px;
    margin: 1px;
    border: solid 1px #ccc;
    float: left;
}

.clear-fix {
    clear: both;
}

</style>

</head>

<body>

    <div id="splash">

        <div class="box">
        </div>

        <div class="box2">
        </div>

        <div class="box">
        </div>

        <div class="clear-fix">
        </div>

    </div>

</body>
</html>

Can this be done with CSS or does anyone know a method to accomplish this with javascript? It will be helpful to figure this out.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    if you plan on including more elements in #splash you are after the jQuery plugin masonry

    here is a soltion demo for the extension problem

    http://jsfiddle.net/kxMYS/

    $( function() {

    $('#splash').masonry({
        itemSelector: 'div'
    });

});

    however

    if you only want a solution to you’re exact given problem

    just change your css for .box2 to float:left;

    http://jsfiddle.net/kxMYS/1/

    • 0