CODEWITHSUNDEEP
csshtmlwidthcss-float
reggie
reggie

Reputation: 3674

Extend floating div to 100% width of parent container

I have a div container that contains a comment. It is set to float left and the avatar container is next to it (which also floats to the left). Here is a screenshot.

enter image description here

The css of the white comment container:

.comment_content{
    float: left;
/*
    width: 86%;
*/
    margin-left:5px;
    padding-left: 15px;
    background: url(http://video.chubbyparade.com/img/arrow_left.png) no-repeat 0 8px;
}

I want to set this container to fill 100% of the remaining space in the parent container.

If I set it to width:100%, I get a line break (because it now fills 100% of the parent container's width).

How can I set the comment container to fill the remaining space? I used to do this by setting it to width:86%. But that does not look nice if I resize the window (the layout is NOT fixed width).

A table would be the easy way out. But isn't there a solution with css?

Upvotes: 2

Views: 3261

Answers (2)

Tess
Tess

Reputation: 702

Dave Haigh's solution is a reasonable approach. If you really, really insist on using floats, you can pad the left side of your container out to the width of your portraits, and then give the portraits a margin-left of 100%. It is kind of silly, but it will work.

jsFiddle demo: http://jsfiddle.net/Malkyne/FZcPq/

Upvotes: 3

Dave Haigh
Dave Haigh

Reputation: 4547

Why not instead of floating the comment box, just give a margin-left high enough to clear the avatar image. e.g. if the avatars are 150px wide, give the comment box margin-left: 155px; as the comment box is a div (block element) it will naturally fill the rest of the remaining space of the parent div.

jsfiddle example here: http://jsfiddle.net/UHksQ/

Styling:

.avatar {
    float: left;
    width: 150px;
}
.comment {
    margin-left:155px;
}

Upvotes: 3

Related Questions