SitePoint Sponsor

User Tag List

Results 1 to 3 of 3

Thread: Spacing Trouble

  1. #1
    Coding for Jesus LavernGingerich's Avatar
    Join Date
    Jul 2003
    Location
    Tennessee
    Posts
    607
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Spacing Trouble

    Why doesn't div.window-group expand in height to hold div.window-block? It's causing a weird spacing problem in Firefox because my margin between .window-group and h3 is collapsing.

    Code:
    <h3>Other Styles in the 4200 Series</h3>
            
            <div class="window-group">
              <div class="window-block"><img class="window" src="images/windows/3-lite-slider.jpg" alt="Vinyl 3-Lite Slider Window" title="Vinyl 3-Lite Slider Window" width="150" height="88" /><p>3-Lite Slider</p></div>
              <div class="window-block"><img class="window" src="images/windows/picture.jpg" alt="Picture Window" title="Picture Window" width="126" height="88" /><p>Picture Window</p></div>
            </div>
            
            <h3>Optional Grid Patterns</h3>
            
            <div class="window-group">
              <div class="window-block"><img class="window" src="images/windows/grid-colonial.jpg" alt="Colonial Grid Pattern for Vinyl Windows" title="Colonial Grid Pattern for Vinyl Windows" width="78" height="150" /><p>Colonial</p></div>
              <div class="window-block"><img class="window" src="images/windows/grid-prairie.jpg" alt="Prairie Grid Pattern for Vinyl Windows" title="Prairie Grid Pattern for Vinyl Windows" width="76" height="150" /><p>Prairie</p></div>
              <div class="window-block"><img class="window" src="images/windows/grid-diamond.jpg" alt="Diamond Grid Pattern for Vinyl Windows" title="Diamond Grid Pattern for Vinyl Windows" width="77" height="150" /><p>Diamond</p></div>
            </div>
            
            <h3>Other Options</h3>
    The parent element is #right.

    Code:
    #right {
      width: 549px;
      float: left;
      padding: 20px 30px 10px 30px;
      text-align: center;
    }
    
    #right img {
      border: 1px solid #000000;
      margin: 20px 0 10px 0;
    }
    * html #right {width:609px;w\idth:549px;}
    
    #right img.border0 {
      border: 0;
    }
    
    #right img.float-right {
      float: right;
      margin: 10px 0 20px 30px;
    }
    
    .window-group {
      width: 98&#37;;
      margin: 30px 0 20px 0;
    }
    
    .window-block {
      float: left;
    }
    
    .window-block p {
      font-weight: bold;
      text-align: center;
      padding: 0;
      margin: 0;
    }
    
    #right img.window {
      margin: 10px;
      clear: right;
      border: 0;
    }
    Yoder's Smoky Mountain Barbecue
    High quality barbeque smokers, pig roasters, and bbq pit grills.
    Pursuing Life Ministries - Jesus has saved me and given me hope.

  2. #2
    I meant that to happen silver trophybronze trophy Raffles's Avatar
    Join Date
    Sep 2005
    Location
    Tanzania
    Posts
    4,662
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    That's because the window-block divs are floated and need to be cleared. Have a look at the FAQ thread at the top of this forum and read about floats. A quick way to clear them is to give the window-group divs overflow:auto or overflow:hidden which I think should work nicely in your case.

    Normally one has to also add a rule just for IE6 to give it a height of 1&#37; to make it have layout, but in your case you have already given window-group a width that is not auto, so it will have layout.

  3. #3
    Coding for Jesus LavernGingerich's Avatar
    Join Date
    Jul 2003
    Location
    Tennessee
    Posts
    607
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you for your help! It works now.
    Yoder's Smoky Mountain Barbecue
    High quality barbeque smokers, pig roasters, and bbq pit grills.
    Pursuing Life Ministries - Jesus has saved me and given me hope.


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
  •