keep image inside <div> box

D

Danny Anderson

Hola, html folk!

I am using css to define <div> boxes that contain either text or text
with pictures:

..blueborderbox
{
padding: 3px;
border-style: solid;
border-width: thin;
border-color: #000080;
font-family:verdana, arial, helvetica, sans-serif;
background-color: #FFFFFF;
margin-bottom: 5px;
margin-top: 5px;
margin-right: 10px;
}


When I use this box with an image, the image will go outside of the box
border if there isn't enough text to make box tall enough to accomadate
the image height:

<div class="blueborderbox">
<img info here>Text here...if there isn't enough text to wrap the picture, the picture
will poke out of the bottom of the box</div>


I want to keep the image completely within the border of the div box,
meaning that I would like to have white space in the box to match the
height of the image if necessary.

Here is a crude ascii representation of what I want:

+---------------------------------+
| +----+ some text will go here, |
| | | with whitespace to fill |
| | | the gap when needed. |
| | | |
| +----+ |
+---------------------------------+

Here is a crude ascii representation of what I currently have:
+---------------------------------+
| +----+ some text will go here, |
| | | with whitespace to fill |
| | | the gap when needed. |
+-| |--------------------------+
+----+
 
J

Jim Royal

Danny Anderson said:
When I use this box with an image, the image will go outside of the box
border if there isn't enough text to make box tall enough to accomadate
the image height:

Simple: set a value for height on the box large enough to encompass the
image.
 
N

Nico Schuyt

Danny said:
I am using css to define <div> boxes that contain either text or text
with pictures:

.blueborderbox
{
padding: 3px;
border-style: solid;
border-width: thin;
border-color: #000080;
font-family:verdana, arial, helvetica, sans-serif;
background-color: #FFFFFF;
margin-bottom: 5px;
margin-top: 5px;
margin-right: 10px;
}
When I use this box with an image, the image will go outside of the
box
border if there isn't enough text to make box tall enough to
accomadate the image height:

Unless the image has a float property, that's not normal I think.
Do you have an URL?
Nico
 
T

Toby A Inkster

Danny said:
Here is a crude ascii representation of what I currently have:
+---------------------------------+
| +----+ some text will go here, |
| | | with whitespace to fill |
| | | the gap when needed. |
+-| |--------------------------+
+----+

Looks like you have floated the image. This is expected behaviour.

To achieve your desired effect, add (just before the </div> tag):

<br style="clear:both;">
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

Forum statistics

Threads
473,744
Messages
2,569,484
Members
44,903
Latest member
orderPeak8CBDGummies

Latest Threads

Top