CODEWITHSUNDEEP
htmlcss
Harish
Harish

Reputation: 303

floating div with same height

I have four div's floating. If the content of the first div is more, the border is not same across the four div's. But I want the border height to be increased based on the lengthy content across the four div's.

As given in this example, the first div is having more content so the border bottom height is not same across four div's. How can I make same height across four div's for different content in the div's. 

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>

    <div>
        <div style="float: left; width: 24.5%; border: 1px solid;">
            <span>This is a test span</span>  <span>This is a test span</span>  <span>This is a test span</span>  <span>This is a test span</span>  <span>This is a test span</span>
        </div>
        <div style="float: left; width: 24.5%; border-top: 1px solid; border-bottom: 1px solid;">Box2</div>
        <div style="float: left; width: 24.5%; border: 1px solid;">Box3</div>
        <div style="float: left; width: 24.5%; border: 1px solid;">Box4</div>
        <br style="clear: left;" />
    </div>

</body>
</html>

Upvotes: 0

Views: 88

Answers (3)

Hemangi Gokhale
Hemangi Gokhale

Reputation: 790

Please check the JSfiddle and your issue is resolved.

Your HTML:

<div id="main-div">
    <div id="div1" style="float: left; width: 24.5%; border: 1px solid;"> <span>This is a test span</span>  <span>This is a test span</span>  <span>This is a test span</span>  <span>This is a test span</span>  <span>This is a test span</span>

    </div>
    <div id="div2" style="float: left; width: 24.5%; border-top: 1px solid; border-bottom: 1px solid;"><span>This is a test span</span>  <span>This is a test span</span>  <span>This is a test span</span>  <span>This is a test span</span>  <span>This is a test span</span><span>This is a test span</span>  <span>This is a test span</span>  <span>This is a test span</span>  <span>This is a test span</span>  <span>This is a test span</span><span>This is a test span</span>  <span>This is a test span</span>  <span>This is a test span</span>  <span>This is a test span</span>  <span>This is a test span</span>

    </div>
    <div id="div3" style="float: left; width: 24.5%; border: 1px solid;">Box3</div>
    <div id="div4" style="float: left; width: 24.5%; border: 1px solid;">Box4</div>
    <br style="clear: left;" />
</div>

Some jQuery:

jQuery(document).ready(function($) {
    var div1 = $('#div1').height();
    var div2 = $('#div2').height();
    var div3 = $('#div3').height();
    var div4 = $('#div4').height();

    var largest = Math.max(div1, div2, div3, div4);
    $('#main-div div').height(largest + 'px');
});

Upvotes: 1

CroaToa
CroaToa

Reputation: 910

There are many ways to implement this. For example: 1. Add class .container for your wrapper div

.container {
display: table;
width: 100%;
border-collapse: collapse;
}

.container div {
display: table-cell;
width: 24.5%; border: 1px solid;
}

JsFiddle DEMO

and you can read about this problem here

Upvotes: 2

aniskhan001
aniskhan001

Reputation: 8521

You can set a fixed height to all four divs manually just like you set the width.

If you want first div's height to be inherited to rest of the divs you have to use JavaScript.
Get the height of first div then set that value to rest of the div's height.

And please don't use inline styles, give them some id/class. Thus way you can manipulate them better.

Upvotes: 0

Related Questions