SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Zealot
    Join Date
    Oct 2005
    Posts
    122
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    div placed outside div

    I have the following css code
    Code CSS:
    .contentitem {
      margin-top: 10px;
      width:610px;
      padding-bottom:2px;
      background: #274452 url('/images/contentlinksbottom.jpg') bottom right no-repeat;
    }
    .contentitem h3,
    .contentad h3 {
      background: #5c8394;
    }
    .contentitem .linksnieuws {
      float:left;
      width: 60%;
    }
    .contentitem .rechtsnieuws {
      float:right;
      width: 40%;
    }

    With this css code I want to have general block with a title and inside this block, 2 small blocks.

    Code HTML4Strict:
    <div class="contentitem">
    <h3>Nieuws</h3>
    <div class=linksnieuws>links nieuws</div>
    <div class=rechtsnieuws>rechts nieuws</div>
    </div>

    When I use the above code, my 2 blocks are not displayed inside my block but under it. Any idea why and how to solve this?

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,281
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    You need to clear the floatr if you want the parents background to extend around the floats (see faq on floats). A quick fix is to add overflow:auto to the parent container and then it will contain the floats () see the faq for more solid but more intricate methods.

    Also you need to control the margins on the h3 as the top margin will push it downwards in Firefox.

    When you have a fixed pixel width container don't split it into 2 parts using 60&#37; and 40% because they may add up to 101% due to rounding errors if the percentages don't result in an exact pixel number. Use the correct pixel values instead.

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Untitled Document</title>
    <style>
    .contentitem {
      margin-top: 10px;
      width:610px;
      padding-bottom:2px;
      background: #274452 url('/images/contentlinksbottom.jpg') bottom right no-repeat;
      overflow:auto;
    }
    .contentitem h3,
    .contentad h3 {
      background: #5c8394;
    }
    .contentitem .linksnieuws {
      float:left;
      width: 366px;
    }
    .contentitem .rechtsnieuws {
      float:right;
      width: 244px;
    }
    h3{margin:0}
    </style>
    </head>
    <body>
    <div class="contentitem">
        <h3>Nieuws</h3>
        <div class="linksnieuws">links nieuws</div>
        <div class="rechtsnieuws">rechts nieuws</div>
    </div>
    </body>
    </html>


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
  •