spacing between divs

**gib65** · 02-17-2012, 11:00 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).

**Blogfreakz** · 02-22-2012, 02:33 PM

you can try this code, hope it helps..

Code:

<html>

<head>

<title>The Bow Tower</title>

<style>

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

#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;
float:left;
}

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>

I just add margin 0 in the body to eliminate space then also I added float left in the #imgdiv... good luck!

**gib65** · 02-22-2012, 03:16 PM

Yes, that works. Thanks Blogfreakz

**mathewines** · 02-27-2012, 05:59 AM

I was just looking for an answer to this as well and found this forum. This problem only seems to appear with IE. The answer I've come up with is to include a "spacer" div between your content divs.

<div id="content" class="whatever">
...
</div>

<div class="spacer"> </div>

<div id="more_content" class="whatever">
...
</div>

With the CSS for "spacer" as follows:

div.spacer
{
height:2px;
width:10%;
color: #696969;
background-color: #708090;
margin: 0 0;
padding: 0 0;
border: 0;
font: 1px/1px;
}

**Blogfreakz** · 02-27-2012, 01:20 PM

Originally Posted by gib65

Yes, that works. Thanks Blogfreakz

No problem. If you need any help about web design don't hesitate to contact me.

Thread: spacing between divs

Thread Tools

Search Thread

spacing between divs

Bookmarks

Bookmarks

Posting Permissions