I am working on a section of a site i am creating and am having some problems.<br />
<br />
You can view it here:<br />
<!-- m --><a class="postlink" href="http://members.rogers.com/kandieman101/test.html">http://members.rogers.com/kandieman101/test.html</a><!-- m --><br />
<br />
What happens is, since the repeated words "test" ends up not being as tall as the image, the image goes "outside" of the div. How can I make image NOT "be on top" and restrict itself to the div (therefore making the div taller)??<br />
<br />
It displays the same in both Opera and IE6... Obviously I would like the lighter orange to go down more to surround the entire "block of content".<br />
<br />
<br />
Hope you could follow that...<!--content-->the problem is that the image is floated "align=left", which as you can see sometimes creates more problems than it solves. I would use a small table inside the div to align the taxt and the image, maybe something like:<br />
<br />
<br />
<DIV style="WIDTH: 350px"><br />
<DIV <br />
style="BORDER-RIGHT: #ffaa22 1px solid; PADDING-RIGHT: 5px; BORDER-TOP: #ffaa22 1px solid; PADDING-LEFT: 5px; FONT-WEIGHT: bold; FONT-SIZE: 14px; PADDING-BOTTOM: 5px; BORDER-LEFT: #ffaa22 1px solid; PADDING-TOP: 5px; BORDER-BOTTOM: #ffaa22 1px solid; FONT-STYLE: italic; FONT-FAMILY: Verdana; BACKGROUND-COLOR: #ffaa22">Title</DIV><br />
<DIV <br />
style="BORDER-RIGHT: #ffaa22 2px solid; PADDING-RIGHT: 5px; PADDING-LEFT: 5px; PADDING-BOTTOM: 5px; BORDER-LEFT: #ffaa22 2px solid; PADDING-TOP: 5px; BORDER-BOTTOM: #ffaa22 3px solid; BACKGROUND-COLOR: #ffddaa"><br />
<table border=0><tr><td valign="top"><IMG <br />
src=http://www.htmlforums.com/archive/index.php/"Untitled Document_files/pic.jpg"></td><td valign="top">test test test test test test <br />
test test test test test test test test test test </td></tr></table></DIV></DIV><!--content-->I thought about putting them in tables, but surely there must be some way!?<!--content-->Hi there KandieMan101,<br />
<br />
Pop the item in red into your third div style
<br />
<br />
background-color:#FFDDAA;height:168"><br />
<br />
It looks OK in IE6 and Netscape7
<br />
<br />
coothead<!--content-->That won't help.<br />
<br />
The image will be of different dimensions all the time, as will the text (of various length).<!--content-->Hi there KandieMan101,<br />
<br />
You keep moving the goal posts
<br />
<br />
Surely if you are going to insert a new image or text into your <div>...<br />
then what is the problem of adjusting this height attribute at the same time
<br />
<br />
You do not like kevin's solution either...what do you want...Magic <br />
<br />
coothead<!--content-->if the image and text are different everytime and you can't calculate what they will be then you have to run some code to check for the size of the image and then set the div height to the same as the image.<br />
<br />
or you can just add<br />
<br />
<div style="height: 200px; border-left:2px solid #FFAA22; border-right:2px solid #FFAA22; border-bottom:3px solid #ffAA22; padding:5px;<br />
background-color:#FFDDAA"><img src=http://www.htmlforums.com/archive/index.php/"pic.jpg" align="left">test test test test test test test test test test test test test test test test </div><br />
<br />
works just fine<!--content-->Hmm... there is no other way to make the text wrap around the image, without the image being "on a layer" ?<!--content-->you do not have to have it in it's own layer for the text to wrap.<br />
<br />
<table><br />
<tr><br />
<td><img align="left">text here</td><br />
</tr><br />
</table><br />
<br />
that will do what you are doing now. the only fix for you is what we suggested or you make it dynamic, just use percentages or changing the height according to the image height with serverside code.<!--content-->Scout, okay thanks... for now I will just specify the height and use that until I run into any problems =)<!--content-->
<br />
You can view it here:<br />
<!-- m --><a class="postlink" href="http://members.rogers.com/kandieman101/test.html">http://members.rogers.com/kandieman101/test.html</a><!-- m --><br />
<br />
What happens is, since the repeated words "test" ends up not being as tall as the image, the image goes "outside" of the div. How can I make image NOT "be on top" and restrict itself to the div (therefore making the div taller)??<br />
<br />
It displays the same in both Opera and IE6... Obviously I would like the lighter orange to go down more to surround the entire "block of content".<br />
<br />
<br />
Hope you could follow that...<!--content-->the problem is that the image is floated "align=left", which as you can see sometimes creates more problems than it solves. I would use a small table inside the div to align the taxt and the image, maybe something like:<br />
<br />
<br />
<DIV style="WIDTH: 350px"><br />
<DIV <br />
style="BORDER-RIGHT: #ffaa22 1px solid; PADDING-RIGHT: 5px; BORDER-TOP: #ffaa22 1px solid; PADDING-LEFT: 5px; FONT-WEIGHT: bold; FONT-SIZE: 14px; PADDING-BOTTOM: 5px; BORDER-LEFT: #ffaa22 1px solid; PADDING-TOP: 5px; BORDER-BOTTOM: #ffaa22 1px solid; FONT-STYLE: italic; FONT-FAMILY: Verdana; BACKGROUND-COLOR: #ffaa22">Title</DIV><br />
<DIV <br />
style="BORDER-RIGHT: #ffaa22 2px solid; PADDING-RIGHT: 5px; PADDING-LEFT: 5px; PADDING-BOTTOM: 5px; BORDER-LEFT: #ffaa22 2px solid; PADDING-TOP: 5px; BORDER-BOTTOM: #ffaa22 3px solid; BACKGROUND-COLOR: #ffddaa"><br />
<table border=0><tr><td valign="top"><IMG <br />
src=http://www.htmlforums.com/archive/index.php/"Untitled Document_files/pic.jpg"></td><td valign="top">test test test test test test <br />
test test test test test test test test test test </td></tr></table></DIV></DIV><!--content-->I thought about putting them in tables, but surely there must be some way!?<!--content-->Hi there KandieMan101,<br />
<br />
Pop the item in red into your third div style
<br /><br />
background-color:#FFDDAA;height:168"><br />
<br />
It looks OK in IE6 and Netscape7
<br /><br />
coothead<!--content-->That won't help.<br />
<br />
The image will be of different dimensions all the time, as will the text (of various length).<!--content-->Hi there KandieMan101,<br />
<br />
You keep moving the goal posts
<br /><br />
Surely if you are going to insert a new image or text into your <div>...<br />
then what is the problem of adjusting this height attribute at the same time
<br /><br />
You do not like kevin's solution either...what do you want...Magic
<br /><br />
coothead<!--content-->if the image and text are different everytime and you can't calculate what they will be then you have to run some code to check for the size of the image and then set the div height to the same as the image.<br />
<br />
or you can just add<br />
<br />
<div style="height: 200px; border-left:2px solid #FFAA22; border-right:2px solid #FFAA22; border-bottom:3px solid #ffAA22; padding:5px;<br />
background-color:#FFDDAA"><img src=http://www.htmlforums.com/archive/index.php/"pic.jpg" align="left">test test test test test test test test test test test test test test test test </div><br />
<br />
works just fine<!--content-->Hmm... there is no other way to make the text wrap around the image, without the image being "on a layer" ?<!--content-->you do not have to have it in it's own layer for the text to wrap.<br />
<br />
<table><br />
<tr><br />
<td><img align="left">text here</td><br />
</tr><br />
</table><br />
<br />
that will do what you are doing now. the only fix for you is what we suggested or you make it dynamic, just use percentages or changing the height according to the image height with serverside code.<!--content-->Scout, okay thanks... for now I will just specify the height and use that until I run into any problems =)<!--content-->