keep image inside <div> box

Discussion in 'HTML' started by Danny Anderson, Jan 8, 2004.

  1. 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. |
    +-| |--------------------------+
    +----+
     
    Danny Anderson, Jan 8, 2004
    #1
    1. Advertising

  2. Danny Anderson

    Jim Royal Guest

    In article <>, 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:


    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
     
    Jim Royal, Jan 8, 2004
    #2
    1. Advertising

  3. Danny Anderson

    Nico Schuyt Guest

    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
     
    Nico Schuyt, Jan 8, 2004
    #3
  4. David Dorward, Jan 8, 2004
    #4
  5. 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
     
    Toby A Inkster, Jan 8, 2004
    #5
  6. Danny Anderson

    Nico Schuyt Guest

    Nico Schuyt, Jan 8, 2004
    #6
    1. Advertising

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

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Gnarlodious
    Replies:
    4
    Views:
    17,717
    elizas
    May 5, 2010
  2. welshbaloney

    Keep iFrame positioned inside centered <div>?

    welshbaloney, Jan 12, 2008, in forum: HTML and CSS
    Replies:
    0
    Views:
    751
    welshbaloney
    Jan 12, 2008
  3. K Viltersten

    <div ... /> and <div ...></div>

    K Viltersten, Mar 30, 2009, in forum: ASP .Net
    Replies:
    4
    Views:
    814
  4. Dwayne Madsen

    Q: Div A inside Div B is larger than Div B

    Dwayne Madsen, Jun 1, 2005, in forum: Javascript
    Replies:
    1
    Views:
    245
    David Dorward
    Jun 1, 2005
  5. 123Jim
    Replies:
    0
    Views:
    161
    123Jim
    May 16, 2011
Loading...

Share This Page