CODEWITHSUNDEEP
css
styler
styler

Reputation: 16491

making an element fill available space provided by parent container

I have a fluid article that has 2 columns 1 contains an image that fills whatever space is available for that column, the other column has text but I'm not sure how I can make this column .content-col occupy the space provided by .article. Can anyone advise how this can be achieved?

Jsfiddle http://jsfiddle.net/R7AuG/

CSS Snippet

.img-col{
    width: 25%;
    float: left;
}

.content-col{
    background: black;
    width: 75%;
    float: left;
}

.col{
    width: 50%;
    float: left;
}

I also understand that this could be achieved with display:table but I'm wondering if this can be done without?

Upvotes: 1

Views: 114

Answers (1)

Maciej Gurban
Maciej Gurban

Reputation: 5729

If you don't want to imitate a table, you could use a small CSS trick, namely, adding

overflow: hidden

to article, plus applying 

margin-bottom:-1000em;
padding-bottom:1000em;

to .content-col

See example

Upvotes: 1

Related Questions