Reputation: 11845
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
}
Upvotes: 0
Views: 81
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
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
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
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