CODEWITHSUNDEEP
javascripthtmlcss
DraugDev
DraugDev

Reputation: 81

Div height of parent

I have some problems with setting height of a child div. I've got 2 divs , one of them with picture and the other with text.

Both of them are in parent div.

You can check it here: http://fiddle.jshell.net/JgkgB/

HTML:

<div class="content-news">
    <div class="news_content">
    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore t dolore magna aliquyam erat, sed diam voluptua.
    </div><!--news_content-->

    <div class="post_image">
    <img src="http://ec.l.thumbs.canstockphoto.com/canstock13365568.jpg" />
    </div><!--post image-->

</div><!--content news-->

CSS:

.content-news {
    height: 100%;
    overflow: hidden;
    margin-bottom: 10px;
    padding-bottom: 10px;
    border-bottom: 1px dotted black;
}

.post_image {
    float: left;
    margin-right: 9px;
    margin-top: 5px;
    max-width: 140px;
    width: 100%;

}

.news_content {
    float: right;
    width: 100%;
    max-width: 527px;
    background-color: #cccccc;
    height: 100%;
}

I already tried to use JavaScript or jQuery but it doesn't help me.

All I need is to make text-div same height as the picture-div.

I used search to find some questions that may help me, but it didn't.

Upvotes: 0

Views: 112

Answers (5)

SKeurentjes
SKeurentjes

Reputation: 1878

Heights in percentage won't work if you use floats. Try to use display: table-cell;

Example: http://fiddle.jshell.net/skeurentjes/JgkgB/13/

Upvotes: 1

David
David

Reputation: 11

Try using jQuery:

$(".news_content").css({'height':($(".post_image").height()+'px')});

That should work for setting the same height on the text DIV.

Upvotes: 1

AlexPrinceton
AlexPrinceton

Reputation: 1203

add this 

.content-news {
    min-height: 100%;
    height: 100%;
    overflow: hidden;
    margin-bottom: 10px;
    padding-bottom: 10px;
    border-bottom: 1px dotted black;
}

Upvotes: 1

DrRoach
DrRoach

Reputation: 1356

One way is to simply set the height of both elements in the CSS like so :

height:enter-height;

http://jsfiddle.net/JgkgB/

Upvotes: 0

Ed T.
Ed T.

Reputation: 1039

Add

position: relative;

to your .content-news

and

position: absolute;
right: 0;
top:0;
bottom: 0;

to your .news_content and that should work. http://fiddle.jshell.net/JgkgB/3/

Upvotes: 3

Related Questions