SitePoint Sponsor

User Tag List

Results 1 to 4 of 4

Hybrid 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

  2. #2
    Non-Member
    Join Date
    Jan 2005
    Location
    Netherlands
    Posts
    4,300
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hello

    Clear your floats for FF and check IE for haslayout

  3. #3
    SitePoint Enthusiast
    Join Date
    Mar 2005
    Posts
    35
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Is it possible to do without clearing floats

  4. #4
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    If you know the exact height of the floated element, you can set an explicit height for the container, or add the corresponding amount of bottom padding.
    Birnam wood is come to Dunsinane


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
  •