Announcement

Collapse
No announcement yet.

[RESOLVED] space between divs

Collapse
X
  • Filter
  • Time
  • Show
Clear All
new posts

  • [RESOLVED] space between divs

    Hello,

    Please have a look at this site: http://www.shahspace.com/bow/home.html

    As you can see, I have two div colored pink and some space between them and around them. I'd like to get rid of all spacing but I can't.

    Here's the code:

    Code:
    <html>
    
    <head>
    
    <title>The Bow Tower</title>
    
    <style>
    
    body
    {
    background: url('content_bg.jpg');
    background-repeat: repeat-x;
    }
    
    #textdiv
    {
    width: 230px;
    height: 100%;
    background-color: #ffaaaa;
    float: left;
    padding: 0;
    margin: 0;
    }
    
    #imgdiv
    {
    width: 250px;
    height: 100%;
    background-color: #ffaaaa;
    padding: 0;
    margin: 0;
    }
    
    span
    {
    font-size: 18pt;
    font-family: verdana;
    font-weight: bold;
    }
    
    </style>
    
    </head>
    
    <body>
    
    <div id="textdiv">
    <br>
    <br>
    <span>
    The Bow Tower<br>
    </span>
    <br>
    <br>
    <ul>
    <li><a href="services.html">Services</a></li>
    <li><a href="information.html">Information</a></li>
    <li><a href="health_safety.html">Health and Safety</a>
    <li><a href="index.html">Index</a>
    </ul>
    </div>
    
    <div id="imgdiv"><img align=right src="bow tower.jpg" border=0></div>
    
    </tr>
    </table>
    
    </body>
    </html>
    What can I do to get rid of the spacing (I'm working in IE9).

  • #2
    Use a complete doctype and have your img src as a one-word filename. No spaces are allowed in filenames.
    Cat-herder Extraordinaire

    Comment


    • #3
      Try putting a float:left in the #imgdiv css

      #imgdiv
      {
      width: 250px;
      height: 100%;
      background-color: #ffaaaa;
      padding: 0;
      margin: 0;
      float:left
      }

      Comment


      • #4
        Originally posted by howtodoablog View Post
        Try putting a float:left in the #imgdiv css

        #imgdiv
        {
        width: 250px;
        height: 100%;
        background-color: #ffaaaa;
        padding: 0;
        margin: 0;
        float:left
        }
        Perfect! That gets rid of the space between the divs but what about around the divs?

        Just to note: These divs are in an iframe which is in a table cell.

        The outer page looks like this:

        Code:
        <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >
        
        <html>
        
        <head>
        <title>H&R Properties</title>
        
        <style type="text/css">
        table.master
        {
        height: 100%;
        }
        
        td.banner
        {
        height: 100px;
        text-align: center;
        }
        
        span.banner
        {
        font-size: 24pt;
        }
        
        td.news
        {
        width: 200px;
        padding-top: 10px;
        text-align: center;
        }
        
        iframe.news
        {
        width: 100%;
        height: 100%;
        }
        
        td.menuandcontent
        {
        width: 531px;
        }
        
        table.menuandcontent
        {
        width: 100%;
        height: 100%;
        }
        
        td.menu
        {
        height: 50px;
        background: url('menu_bg.jpg');
        text-align: center;
        }
        
        td.content
        {
        text-align: left;
        }
        
        iframe.content
        {
        width: 100%;
        height: 100%;
        }
        
        
        </style>
        
        </head>
        
        <body>
        
        <table class="master" cellspacing=0 cellpadding=0 border=0>
        
        <tr><td colspan=2 class="banner">
        <span class="banner">
        <img src="H&Rbanner.jpg" border=0></span></td></tr>
        
        <tr>
        
        <td class="news">
        <iframe class="news" src="news.html" scrollable=yes frameborder=no></iframe>
        </td>
        
        <td class="menuandcontent">
        <table class="menuandcontent" cellspacing=0 cellpadding=0 border=0>
        
        <tr>
        <td class="menu">
        
        <table cellspacing=0 cellpadding=0 border=0>
        <tr>
        <td><img src="home.jpg" border=0></td>
        <td><img src="services.jpg" border=0></td>
        <td><img src="information.jpg" border=0></td>
        <td><img src="health_safety.jpg" border=0></td>
        <td><img src="index.jpg" border=0></td>
        </tr>
        </table>
        
        </td></tr>
        
        <tr>
        <td class="content">
        <iframe class="content" src="content.html" srollable=yes frameborder=0></iframe>
        </td>
        </tr>
        
        </table>
        </td>
        
        </tr>
        </table>
        
        </body>
        </html>

        Comment


        • #5
          try putting this for the page inside the iframe

          body
          {
          background: url('content_bg.jpg');
          background-repeat: repeat-x;
          margin:0;
          padding:0

          }

          Comment


          • #6
            Thanks howto, that worked.

            Comment

            Working...
            X