Forum Moderators: not2easy
I have this annoying problem with resizing text. I use the ctrl+scroll in FF to resize the text and it works wonderfully.
I have these small divs with text and images and when I resize the divs also resize since I didn't set the size. That's all good, but the div should stop resizing when it reaches the image. Meaning that the div should get smaller then the image! I have borders on the divs so it looks really weird when you shrink the text too much.
I determined that it depended on me having float:left; set on the images which apparantly also effected the divs. I can solve the problem with using a small table instead but I don't really want to.
Is there a way around it in CSS?
Examples:
#kolumnbox1 {margin: 0px 0px; padding: 2em 1em; border-left: 1px solid #336699; border-right: 1px solid #336699; background: #ffffff; vertical-align:middle;}
<!-- -------------- not working ---------- -->
<div id="kolumnbox1">
<img style="float:left; border: 2px solid #336699; margin: 0px 1em;" src="bilder/chico.jpg">
text texttexttexttexttexttexttexttexttexttexttexttexttexttext
</div>
<!-- -------------- working ---------- -->
<div id="kolumnbox1">
<table>
<tr>
<td> <img style=" border: 2px solid #336699; margin: 0 1em;" src="bilder/max.jpg"></td>
<td>texttexttexttexttexttexttexttexttexttexttexttexttexttexttext
</td>
</tr>
</table>
</div>
#kolumnbox1 {position:absolute; margin: 0px 0px; padding: 2em 1em; border-left: 1px solid #336699; border-right: 1px solid #336699; background: #ffffff; vertical-align:middle;}
#kolumnbox2 {
position:relative;
top:-35px;//negative number aligns bild to middle
left:1px;
float:left;
border: 2px solid #336699;
margin: 0px 1em;
vertical-align:super;
display: block;
}
<div id="kolumnbox1">
<div id="kolumnbox2"><img src="bilder/chico.jpg">
</div>
text texttexttexttexttexttexttexttexttexttexttexttexttexttext</div>
