Velocity Reviews - Computer Hardware Reviews

Velocity Reviews > Newsgroups > Programming > HTML > keep image inside <div> box

Reply
Thread Tools

keep image inside <div> box

 
 
Danny Anderson
Guest
Posts: n/a
 
      01-08-2004
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. |
+-| |--------------------------+
+----+


 
Reply With Quote
 
 
 
 
Jim Royal
Guest
Posts: n/a
 
      01-08-2004
In article <(E-Mail Removed)>, Danny Anderson
<(E-Mail Removed)> wrote:

> 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.

--
Jim Royal
"Understanding is a three-edged sword"
http://JimRoyal.com
 
Reply With Quote
 
 
 
 
Nico Schuyt
Guest
Posts: n/a
 
      01-08-2004
Danny Anderson wrote:
> 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


 
Reply With Quote
 
David Dorward
Guest
Posts: n/a
 
      01-08-2004
Danny Anderson wrote:

> 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


http://www.complexspiral.com/publica...aining-floats/

--
David Dorward <http://dorward.me.uk/>
 
Reply With Quote
 
Toby A Inkster
Guest
Posts: n/a
 
      01-08-2004
Danny Anderson wrote:

> 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;">

--
Toby A Inkster BSc (Hons) ARCS
Contact Me - http://www.goddamn.co.uk/tobyink/?page=132

 
Reply With Quote
 
Nico Schuyt
Guest
Posts: n/a
 
      01-08-2004
David Dorward wrote:

> http://www.complexspiral.com/publica...aining-floats/


Thanks for that link!
Nico


 
Reply With Quote
 
 
 
Reply

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are Off


Similar Threads
Thread Thread Starter Forum Replies Last Post
How keep python socket alive for ever by setting Keep alive flag. hisan Python 1 06-25-2012 05:30 PM
div box questions; float text around a box, fit box to image size Gnarlodious HTML 4 05-05-2010 11:30 AM
Refreshing image box with new image Dev Javascript 1 01-26-2009 10:35 AM
How to keep aspect ratio of image inside an ImageButton control? Arthur Hsu ASP .Net 5 12-08-2004 12:51 AM
Trying to create a CSS box that is always is always the width of an image placed inside it (and no wider) Deryck HTML 4 06-22-2004 08:25 PM



Advertisments