CODEWITHSUNDEEP
htmlcsslayout
Álvaro García
Álvaro García

Reputation: 19396

how can I adjust the hight of the second column to the hight of the first?

I have this code in my hmtl style file:

<div id="main-wrap">
    <!--Page es también eltítulo y el texto principal.-->
    <div id="page">
        <div id="main">
        <!--El content es el título y todo el texto principal.-->
            <div id="content">{content}</div>
            <div id="columna-derecha"><IMG src="http://www.weebly.com/uploads/1/4/5/3/14535654/custom_themes/958714113245935093/files/aguaOriginal.jpg?1390992371290"></div>
        </div>
    </div>
</div>

My CSS file has this code:

#content {
    //min-height: 400px;
    //height: auto;
    width: 76%;
    /*@NOTA: el padding modifica la separación entre las banderas con los idiomas el menú.*/
    //padding: 30px 0;
    /*Es todo lo que hay debabjo del menú y encima del anuncio de weebly.
    Es aquí donde se pondrá la imagen de fondo con el chorro del agua.*/
    //background-image: url('http://www.weebly.com/uploads/1/4/5/3/14535654/custom_themes/958714113245935093/files/aguaOriginal(opacidad%2035).png?1390925822559');
    //background-size:100% auto;
    //background-repeat:no-repeat;
    //background-position:center;
    /*Se tiene que dejar un margen para la columna de la derecha, donde irá el chorro del agua.*/
    //margin-right: 30%;
    margin-top: 1%;
    float:left;
}

#columna-derecha
{
    float: right;
    //width: 20%;
    height: 100%;
    //background: #123123;
    //padding: 30px 0;
    //margin-top: 2.5%;
}

The content div has the text, and the second div has a right column in which I have a an image that I want that the height is adjust to the height of the div with the text. So when I have many pages that use the same layout, the image has the same height than the div with the text.

Thanks.

Upvotes: 0

Views: 169

Answers (2)

ralph.m
ralph.m

Reputation: 14365

Here is a simple option with CSS:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style media="all">

#main {display: table; }
#main > div {display: table-cell; vertical-align: top;}

</style>
</head>
<body>

<div id="main-wrap">
    <div id="page">
        <div id="main">
            <div id="content">{content}</div>
            <div id="columna-derecha"><IMG src="http://www.weebly.com/uploads/1/4/5/3/14535654/custom_themes/958714113245935093/files/aguaOriginal.jpg?1390992371290"></div>
        </div>
    </div>
</div>

</body>
</html>

Upvotes: 1

Freelance PHP Programmer
Freelance PHP Programmer

Reputation: 370

Here i have modified your html, hope this helps:

HTML PART:

`

<!--Page es también eltítulo y el texto principal.-->
<div id="page">
    <div id="main">
        <!--El content es el título y todo el texto principal.-->
        <div id="content">{content1}
            <br>{content2}
            <br>{content3}</div>
        <div id="columna-derecha">
            <IMG height="100%" width="100%" src="http://www.weebly.com/uploads/1/4/5/3/14535654/custom_themes/958714113245935093/files/aguaOriginal.jpg?1390992371290">
        </div>
    </div>
</div>

`

jQuery for Div Height

setHeight = function (src, target) {
    h = src.height();
    target.css('height', h + 'px');
}

content = $('#content'); //Content Div
imagediv = $('#columna-derecha'); //Image Div

//Just modify Content and Image divs as per your need and you should have the result.

setHeight(content, imagediv);

Upvotes: 1

Related Questions