CODEWITHSUNDEEP
htmlcsscss-floatheight
FrancescoN
FrancescoN

Reputation: 2186

Floating DIVs and HEIGHT

I want that the 2 divs with different content and size of content will have the same height.

They are floating to the left side; the first has 80% width, the other the 20% width.

Look at the full code on http://jsfiddle.net/9gp6J/2/

<body>
    <div id="contenuto_body">
    <p>Etiam vehicula, nisl at venenatis elementum, augue velit malesuada ipsum, id gravida massa enim ut leo.</p>

    <p>Etiam vehicula, nisl at venenatis elementum, augue velit malesuada ipsum, id gravida massa enim ut leo.</p>

    <p>Etiam vehicula, nisl at venenatis elementum, augue velit malesuada ipsum, id gravida massa enim ut leo.</p>

    <p>Etiam vehicula, nisl at venenatis elementum, augue velit malesuada ipsum, id gravida massa enim ut leo.</p>

    <p>Etiam vehicula, nisl at venenatis elementum, augue velit malesuada ipsum, id gravida massa enim ut leo.</p>

    <p>Etiam vehicula, nisl at venenatis elementum, augue velit malesuada ipsum, id gravida massa enim ut leo.</p>

    <p>Etiam vehicula, nisl at venenatis elementum, augue velit malesuada ipsum, id gravida massa enim ut leo.</p>

</div>

<div id="ads">
    <img src="http://data.whicdn.com/images/1676707/Happiness_is_only_real_when_shared-Christopher_McCandless-480x360-20100312_large.png"/>
</div>
</body>

Upvotes: 0

Views: 104

Answers (3)

Hive7
Hive7

Reputation: 215

Use JQuery .outerHeight() to make the height of both objects the same but make sure you remember to input an ajax file.

Here is a working fiddle:

http://jsfiddle.net/9gp6J/8/

Upvotes: 0

user1979270
user1979270

Reputation:

You set height to 100% on the div#ads, but it doesn't know 100% of what height...

If you set the body height, it will work, here is your update jsfiddle

Upvotes: 1

Can Geliş
Can Geliş

Reputation: 1474

Consider using display: table-cell rather than float. Take a look at the example: http://jsfiddle.net/26MGE/

Upvotes: 1

Related Questions