CODEWITHSUNDEEP
htmlcssvertical-alignment
Chris
Chris

Reputation: 15

Align divs vertically when floated

with a floated set of divs how do i vertically align them so they sit all together without white space below shorter divs ie here....

<!doctype html>
<html>    
    <head>
        <meta charset="utf-8">
        <style>
            * {
                margin: 0;
                padding: 0;
            }
            .imadiv {
                border: 1px solid #FF0000;
                float: left;
                margin: 5px;
                padding: 10px;
                width: 200px;
            }
            #wrapper {
                width:800px;
                margin:0 auto;
            }
        </style>
        <title>Untitled Document</title>
    </head>

    <body>
        <div id="wrapper">
            <div id="one" class="imadiv">
                <p>div1</p>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec risus ipsum, ultrices eget nibh et, auctor tristique quam. Nullam blandit.</p>
            </div>
            <div id="two" class="imadiv">
                <p>div2</p>
                        <p>Lorem ipsum dolor sit amet, Nullam blandit.</p>
            </div>
            <div id="three" class="imadiv">
                <p>div3</p>
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec risus ipsum, ultrices eget nibh et, auctor tristique quam. Nullam blandit.</p>
            </div>
            <div id="four" class="imadiv">
                <p>div4
                    </p>
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec risus ipsum, ultrices eget nibh et, auctor tristique quam. Nullam blandit.</p>
            </div>
            <div id="five" class="imadiv">
                <p>div5
                    </p>
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec risus ipsum, ultrices eget nibh et, auctor tristique quam. Nullam blandit. Donec risus ipsum, ultrices eget nibh et.</p>
            </div>
            <div id="six" class="imadiv">
                <p>div6
                    </p>
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec risus ipsum, ultrices eget nibh et, auctor tristique quam. Nullam blandit. Donec risus ipsum, Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec risus ipsum, ultrices eget nibh et.</p>
            </div>
        </div>
        </div>
    </body>

</html>

http://jsfiddle.net/AK32q/4/

so that div5 butts up to div 2 vertically im sure it's Jquery but i cant find anything?

many thanks

Upvotes: 0

Views: 81

Answers (4)

Satwik Nadkarny
Satwik Nadkarny

Reputation: 5135

You don't need any third party frameworks/ libraries. You can do this with pure CSS. All you need to do is use a combination of unordered lists and absolute positioning. That would give you the exact effect you are look for.

Considering the structure of the html the way you have provided, this following CSS should do the trick for you:

* {
    margin: 0;
    padding:0;
}

ul {
    display:inline-block;
    list-style-type:none;
    margin:10px;
    width:30%;
    position:absolute;
}

ul.first {
    left:0%;
}

ul.second {
    left:33%;
}

ul.third {
    left:66%;
}

ul li {
    margin-bottom:10px;
    background-color:Orange;
    display:inline-block;
}

You can see this here: http://jsfiddle.net/3s4Xj/1/

This is a very simple layout that you desire. I'd recommend using pure CSS instead of any third-party libraries.

Hope this helps!!!

Upvotes: 0

Charles
Charles

Reputation: 437

For the top row only, repeat for bottom row.

var element = document.getElementById('one'),
    style = window.getComputedStyle(element),
    one = style.getPropertyValue('height');

var element = document.getElementById('two'),
    style2 = window.getComputedStyle(element),
    two = style2.getPropertyValue('height');

var element = document.getElementById('three'),
    style3 = window.getComputedStyle(element),
    three = style3.getPropertyValue('height');

one = parseInt(one);
two = parseInt(two);
three = parseInt(three);
var divmax = Math.max(one,two,three);
document.getElementById('one').innerHTML = divmax;
document.getElementById('one').style.height = divmax + "px";
document.getElementById('two').style.height = divmax + "px";
document.getElementById('three').style.height = divmax + "px";

FIDDLE DIDDLE

Upvotes: 0

designtocode
designtocode

Reputation: 2245

You can give your class .imadiv a min-height see updated fiddle here http://jsfiddle.net/AK32q/3/

CSS:

.imadiv {
    border: 1px solid #FF0000;
    float: left;
    margin: 5px;
    padding: 10px;
    width: 200px;
    min-height:200px;
}

That just makes it all lined up with same height. I'm sure that's not what you want.

But there's a plugin by David DeSandro, I use his masonry plugin http://masonry.desandro.com/

See your fiddle with his plugin here http://jsfiddle.net/AK32q/5/

Jquery:

var $container = $('#wrapper');
// initialize
$container.masonry({
  columnWidth: 30,
  itemSelector: '.imadiv'
});

var msnry = $container.data('masonry');

Upvotes: 1

gomzy
gomzy

Reputation: 260

try giving the div inside the list like <li><div id="#"></div></li> , this is will solve your problem.

Upvotes: 0

Related Questions