Announcement

Collapse
No announcement yet.

[RESOLVED] space between divs

Collapse
X
Collapse
  • Page of 1
  • Filter
  • Time
  • Show
Clear All
new posts
  • #1

    [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).
    Tags: None
  • #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

            Previous Next
            Working...
            X