SitePoint Sponsor

User Tag List

Results 1 to 4 of 4

Threaded View

  1. #1
    SitePoint Enthusiast
    Join Date
    Mar 2005
    Posts
    35
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    div is not displaying properly

    Frns
    I have a main div called main-content, inside which I have a div “imageleft” to align the image to left. This is working fine. Problem I am facing is the inside div with red border which is imageleft, is displaying outside the main div(with blue border). The div with red border should be inside the div with the blue border..
    The output should look like ImageB.gif, right now it is looking like ImageA.gif

    Html Code
    <div id="main-content">
    <p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tatio </p>
    <div class="imageleft">
    <img src="/images/products/xyz.gif">
    <p class="caption">Caption 1</p> </div>
    </div>

    CSS is
    #main-content{
    margin: 0 12px 20px 12px;
    padding: 20px 0 65px 0;
    *padding: 20px 0 75px 0;
    border: 1px solid #ccc;
    border-top: none;
    border:2px solid blue;
    }
    #main-content div.imageleft{
    float:left;
    display:block;
    *margin-right: 5px;
    margin-left:7px;
    *margin-left:3px;
    }
    div# main-content div.imageleft img{
    border:2px solid red;
    }
    Attached Images Attached Images


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
  •