CODEWITHSUNDEEP
css
daniel__
daniel__

Reputation: 11845

Adjust automatically the size of div

I have this code, but the .text is not working as i expected. The auto should fit in the width of the container, but the .text div will be pushed to a second line. I need the auto value because the width of image can change, and the right div should always fit in the container regardless of image width.

<div class="container">
    <div class="img"><img src="http://placehold.it/350x150"></div>
    <div class="text">Some text Some textSome textSome textSome textSome textSome textSome textSome textSome textSome textSome textSome textSome textSome text</div>
</div>

.img, .text {
    float:left;
}

.text{
    border: 1px solid red;
    height:150px;
    width:auto; //should be width:248px in this specific case;
}

.container{
    width:600px;
    border:1px solid green;
    height:150px
}

http://jsfiddle.net/LCAKw/

Upvotes: 0

Views: 81

Answers (4)

Hushme
Hushme

Reputation: 3144

your using float:left; property you should use width:100%; instead of width:auto; in .text class and also use box-sizing:border-box; if you are using borders or padding

Upvotes: 0

G-Cyrillus
G-Cyrillus

Reputation: 106078

if .text is not floatting and if its layout is tickled via : overflow:hidden; it should work the way you wish http://jsfiddle.net/LCAKw/5/

Upvotes: 0

poke
poke

Reputation: 388463

Just don’t let the .text class float as well. That way it will be a block element, taking the full width (of the parent element) minus the floating. You might want to apply some left padding then though.

Upvotes: 3

Stefan Surkamp
Stefan Surkamp

Reputation: 992

text seems to be a reserved word, you're not allowed to use as a class name. After changing it, the fiddle works great.

Altered CSS:

.text1{
    border: 1px solid red;
    height:150px;
    width:auto;
}

Upvotes: 0

Related Questions