[RESOLVED] space between divs - HTML Forums

gibby · 02-17-2012, 04:58 PM

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).

Pegasus · 02-17-2012, 05:27 PM

Use a complete doctype and have your img src as a one-word filename. No spaces are allowed in filenames.

howtodoablog · 02-17-2012, 05:55 PM

Try putting a float:left in the #imgdiv css

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

gibby · 02-17-2012, 06:01 PM

Quote:

Originally Posted by howtodoablog

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>

howtodoablog · 02-17-2012, 06:09 PM

try putting this for the page inside the iframe

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

gibby · 02-22-2012, 09:15 AM

Thanks howto, that worked.