CODEWITHSUNDEEP
csshtmlheightstretch
ali smith
ali smith

Reputation: 93

how do i can stretch my div according text?

how do i can stretch my div according text

I want to stretch height of a div , with the text user posted

look at the screen shot its clear.

CSS :

.cmnt{ width: 570px; margin-top: 10px; margin-bottom: 10px; float: right; margin-right:     15px; clear:both; }
.cmnt .body{ width: 570px; background: #333333; min-height: 90px; height: auto; }
.cmnt .text{ width: 513px; float: left; font-family: arial; color: #FFF; }
.cmnt .arrow{ width: 570px; height: 7px; background: url(../img/comment_arr.jpg) no-repeat     17px top; }
.cmnt .info{ width: 470px; height: 20px; font-family: arial; font-size: 14px; color: #FFF; float: left; text-align: left; }

HTML :

<div class="cmnt">
<a name="comment-id" />
<div class="body">
<div class="text">
text<br/>
text<br/>
text<br/>
text<br/>
text<br/>
text<br/>
text<br/>
</div>
<img class="avatar" src="assets/img/cmnt-u.jpg" align="absmiddle" />
</div>
<div class="arrow"></div>
<div class="info">
&nbsp;&nbsp;smith (date)
</div>
<div class="rp">
<a href="#comment">reply ↓</a>
</div>
</div>

Image

Comment Image => [comment view][1]

Parent :

<div class="comment">
<div class="cmntHeader">Comments</div>
<div class="cmntBody">
<center>
....
</center>
</div>
</div>

Upvotes: 2

Views: 817

Answers (5)

jean377
jean377

Reputation: 106

What is happening is that you have a floating container with floating children.

In this case, the floating container "ignores" the children dimensions. This is probably a side effect of the implementation of the real primary objective of float (that was to have floating images on wrapped text).

In this article you can see the floating purpose and a list of workarrounds: http://www.ejeliot.com/blog/59

And this is what I think is the best solution so far, the micro clearfix (best about it is that you can put in you css and reuse it whenever you need it again): http://nicolasgallagher.com/micro-clearfix-hack/

Just add this css block to your css file:

/*THE CLEARFIX HACK*/
.clearfix:before,
.clearfix:after {
    content: " ";
    display: table;
}

.clearfix:after { clear: both; }
.clearfix { *zoom: 1; }

And then add the clearfix class to the "body" div.

jsfiddle: XZRH5

Upvotes: 0

Thanh Trung
Thanh Trung

Reputation: 3804

The height of a container is automatically adjusted, if not specified, according to the child (not floated) elements. Because the div (class=text) is floated, its height doesn't take into account. Whenever you used a float, systematically try to clear it after to resolve the height problem.

<div class="text">
...
</div>
<div style="clear:both"></div>

Upvotes: 1

Vogel612
Vogel612

Reputation: 5647

it could be a possibility to add:

div.body
{
height: auto;
}

but i'm not sure it isn't killing the whole layout

In reference to My Head Hurts you need to clear your floats:

.cmnt .body
{
    overflow: hidden;
}

Upvotes: 0

semir.babajic
semir.babajic

Reputation: 741

You can try adding a float: left CSS property to your outer container.

.cmnt .body{ float: left; width: 570px; background: #333333; min-height: 90px; height: auto; }

Here's a fiddle for you

http://jsfiddle.net/znQa8/

Hope it helps.

Upvotes: 1

andy
andy

Reputation: 2399

min-height would be your solution.

Upvotes: 0

Related Questions