Log in

View Full Version : 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:



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




<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">&nbsp;</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
Yes, that works. Thanks Blogfreakz

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