SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Member
    Join Date
    Feb 2005
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Image in a div does not stretch the size of the div to the image size

    I am new here, however not completely new with CSS.

    I have the following situation and problem:

    - I am designing a dynamic web page with asp scripts reading data from access databases. The pages are completely styled with css.

    - On the start page of a internet site I want to have content (in this case news) along with an image on the left in a framed box. The site I am talking about is this one: http://help-network.de.customsite.de.

    - You may recognize that my code is basically working in IE and Firefoy as well, but fails in pne situation (you see it at the end of the page) where the text in the box is shorter than the height of the image. Then the bottom border is not moved down below the image where it should be.

    I have tried various things, all not successful. This includes using no div for the image. Does anyone here know the trick?

    This is the basic html code:

    <div class="col1">
    <h3 class="home_aktuell'>This is a header</h3>"
    <div class="col1_box"
    <div class="col1_img">
    <IMG class="img_home" SRC="image.jpg">
    </div><%
    <p class="home">This is the body text of the news</p>
    </div>
    </div>

    The style sheet code is as follows (I excluded the h3 and p classes)

    div.col1
    {
    width: 425px;
    left: 7px;
    margin-left: 0px;
    top: 0px;
    border-right: none;
    border-bottom: 0px;
    position: absolute;
    z-index: 1;
    }

    DIV.col1_box
    {
    width: auto;
    height: auto;
    position: relative;
    padding: 10px;
    border-right: 0px;
    border: 1px solid navy;
    margin-bottom: 7px;
    }

    DIV.col1_img
    {
    width: auto;
    height: auto;
    position: relative;
    padding: 0px;
    border: none;
    float: left;
    margin-bottom: 0px;
    margin-right: 10px;
    margin-left: 0px;
    margin-top: 0px;
    }

    Any help is aprreciated

  2. #2
    Winemaster bronze trophy BonRouge's Avatar
    Join Date
    Oct 2004
    Location
    Sendai, Japan
    Posts
    2,417
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You need to clear the float.

  3. #3
    SitePoint Member
    Join Date
    Feb 2005
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Thanks

    It works after five times reading the article in the link.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •