CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Bas
Bas

Reputation: 2210

2 Columns the same height not resizing properly

I'm trying to make 2 columns the same heighs my webpage, one of them is a image and a small textbox underneath it, my code for that is: 

        <div class="third-column" style="height: 600px">

            <div class="imageBox">
                <img src="images/rikkertCC.jpg" alt="" >
            </div>

            <div class="tekstBallon">
                <a href="#portolio">

                    <div class="triangle"></div>

                    <div class="tb-cnt">
                        <p>
                            Text
                        </p>
                    </div>
                </a>

            </div>
        </div>

And the CSS:

.third-column {
    width: 33.333333%;
    height: 300px;
    float: left;

}

.imageBox {
    height:auto !important;
    max-height: 90%;
    width: 96%;
}

.imageBox img {
    max-width: 100%;
    max-height: 100%;
}


.triangle{

    position: initial;
    height: 15px;
    width: 25px;    
    margin-left:5%;;



    -webkit-transform:rotate(45deg);
    -moz-transform: rotate(45deg);
    transform:rotate(45deg);

    background-color:#26a0da;

    -webkit-transition: all 1.5s;
    -moz-transition: all 1.5s;
    -o-transition: all 1.5s;
    -ms-transition: all 1.5s;
    transition: all 1.5s;
}

.tekstBallon {
    display: inline-block;
    background-color: #26a0da;

    -webkit-transition: all 1.5s;
    -moz-transition: all 1.5s;
    -o-transition: all 1.5s;
    -ms-transition: all 1.5s;
    transition: all 1.5s;

    float:left;

    height: auto;
    max-height: 16%;

    width: auto;
    max-width: 96%;

    margin-top:3.3%;
}

.textBox {
    display: inline-block;
    background-color: #323232;

    -webkit-transition: all 1.5s;
    -moz-transition: all 1.5s;
    -o-transition: all 1.5s;
    -ms-transition: all 1.5s;
    transition: all 1.5s;

    float:left;

    height: 100%;
    width: 100%;
}

And the column i want to make the same height as the "imageBox" and the "tekstBallon" together:

        <div class="twothird-column" >
            <div class="textBox">
                <div class="tb-cnt">
                    <h2>Over ons</h2>
                    <p class="postInfo"> <b>Is dit wel nodig?</b></p>
                    <p>  
                        text
                    </p>
                </div>
            </div>
        </div>

And the CSS for that:

.twothird-column {
    width: 66.666666%;
    float: right;
    height: 600px;
}

When i tried it with this piece of javascript:

  $(".topContent .twothird-column").css("height", $(".topContent .third-column").height());

But that didnt help.. It made the right column (twoThirdColumn) even smaller.

Also, the image is resizing it self to a maximum of 90% as you can see. Does this matter?

How can I make it so that theyre both the same height?

Upvotes: 0

Views: 68

Answers (2)

Vier
Vier

Reputation: 807

The javascript solution would be 

$(".topContent .twothird-column").height($(".topContent .third-column").height());

You are using the jQuery css function to set the height property with the value returned by the height function, which is unit-less; so you would still need to attach the 'px' string to it.

Upvotes: 1

Xdevelop
Xdevelop

Reputation: 206

Just remove style attribute of the third-column html div and correct the css code of the same div like that:

.third-column {
    width: 33.333333%;
    height: 600px;
    float: left;
}

Not JS/JQuery needed.

Upvotes: 0

Related Questions