Remove space between 2 tables HTML CSS and image removes background image
New here, I am creating a website and there seems to be a problem with a table I made to hold an image and a table I made to hold content. Content on left image on right. When I float the Image table right the content table moves completely underneath it. When I float it left there is too much space in between the 2. The code in question is table and table 3. I want it to display the image block next to the link buttons and the context block underneath the buttons but next to the image block.
The second problem is my logo heading which is an image is removing the background image.
HTML Code
<!DOCTYPE HTML>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<link href="Articlepage.CSS" rel="stylesheet" type="text/css">
<title>BEADLES BEADING</title>
</head>
<body id="wrap">
<h1><img src="logo.jpg" alt="logo"></h1>
<a class="mouseover" href="Home Page.html"><img src="Buttons/New button Home Unpressed.jpg" alt="home"></a>
<a class="mouseover1" href="Article Page.html"><img src="Buttons/New button About us pressed.jpg" alt="about_us"></a>
<a class="mouseover2" href="Section Page.html"><img src="Buttons/New button Products Unpressed.jpg" alt="products"></a>
<a class="mouseover3" href="Contact us.html"><img src="Buttons/New button Contact us Unpressed.jpg" alt="contact_us"></a>
<a class="mouseover4" href="url"><img src="Buttons/New button Home Unpressed.jpg" alt="home"></a>
<table3>AD SPACE(Image)</table3>
<table>
<tr>
<td>
<b>IMAGE/CONTENT</b>
<b>IMAGE/CONTENT</b>
<b>IMAGE/CONTENT</b><br>
<b>IMAGE/CONTENT</b>
<b>IMAGE/CONTENT</b>
<b>IMAGE/CONTENT</b>
<br><br><br><br><br><br><br><br><br><br><br>
</td>
</tr>
</table>
<table2>
<tr>
<td>
FOOTER
</td>
<tr>
</table2>
</body>
</html>
CSS code
div{
text-align:left;
position:relative;
font-size:2.5em;
font-weight:bold;
}
div1{
text-align:left;
position:relative;
font-size:1.5em;
text-shadow: 2px 2px black;
font-family:Georgia, Times, serif;
text-shadow: -1px -1px black, 1px 1px;
}
h1{
text-align:left;
font-family:Arial,Helvetica,sans-serif;
text-shadow: 0.1em 0.1em 0.2em black;
font-size:2.0em;
font-style:italic;
float:inline;
border:3px solid black;
width:800px;
height:196px;
padding:0;
}
h2{
text-align:left;
position:relative;
font-size:1.5em;
font-family:Verdana,Helvetica,sans-serif;
text-shadow: -1px -1px black, 1px 1px;
}
p{
position:relative;
text-align:left;
font-size:1em;
font-family:Georgia, Times, serif;
text-shadow: -1px -1px black, 1px 1px;
}
li
{
position:relative;
font-size:1em;
}
a{
padding:0;
float:left;
}
b{
border:3px solid black;
width:180px;
height:10.5em;
padding:10px;
float:left;
}
b1{
border:3px solid black;
position:absolute;
width:40px;
height:23em;
padding:10px;
float:right;
position: relative;
}
b2{
border:3px solid black;
position:absolute;
width:40px;
height:23em;
padding:10px;
position: relative;
}
body{
background-image:url('background.jpg');
background-size: 100%;
margin:20px;
width:800px;
padding:30px;
position: relative;
}
.centeredImage
{
text-align:center;
margin-top:0px;
margin-bottom:0px;
}
table{
display:inline-block;
width:640px;
margin-left: auto;
margin-right: auto;
border-style:solid;
border-width:5px;
text-align:center;
height:400px;
padding:0;
}
table2{
display:inline-block;
width:625px;
margin-left: auto;
margin-right: auto;
border-style:solid;
border-width:5px;
text-align:center;
height:50px;
}
td{
text-shadow: 0.1em 0.1em 0.2em black;
font-family:"Times New Roman", Times, serif;
}
table3{
float:right;
width:150px;
border-style:solid;
border-width:5px;
text-align:right;
height:490px;
padding:0;
}
p2{
border:10px solid black;
float:rights;
}
select{
width:200px
}
#wrap{
width: 900px;
margin: 0 auto;
}
Image link. Look I am sure you get the just of what it should look like. Plus the white background should have a lilac image I placed into the body as background.
I think the two main problems are:
You set the width of the body to 800px, the first table to 640px, and that table3 to 150px. But the borders on both are 5px wide. 640 + 10 (left and right border of the first table) +10 (left and right border of the second table) + 150 = 810. Even if the tags were correct they're too wide to go next to each other.
Change
<table3>Ad Space</table3>
and
<b>IMAGE/CONTENT</b>
<b>IMAGE/CONTENT</b>
<b>IMAGE/CONTENT</b><br>
<b>IMAGE/CONTENT</b>
<b>IMAGE/CONTENT</b>
<b>IMAGE/CONTENT</b>
To
<div id="adCol">Ad Space</div>
and
<div id="#imgDiv">
<img />
<img />
<img /><br />
<img />
<img />
<img />
</div>
In your CSS change "b" to "#imgDiv img", "table" to "#imgDiv", and "table3" to "#adCol". Then either reduce the width of the borders or make one of them at least 10px smaller in width.
Don't forget to also remove the table2 tag and change whatever you've called b1 and b2 to use real HTML tags and change b1 and b2 in your CSS to class names or ids.
Also, consider not setting the width of the body. You probably don't need that.
In this case I see what your trying to accomplish but you should really use divs it would make it easier.
But why don't you just build (1) table with a layout like this below and place / position it in your content. Instead of creating multiple tables. You can still use CSS to add your effects.
<div id="apDiv3">
<table width="100%" height="335" border="1">
<tr>
<td width="87%" height="207">CONTENT</td>
<td width="13%" rowspan="2"><span class="style5">AD SPACE(Image)</span></td>
</tr>
<tr>
<td height="50">Footer</td>
</tr>
</table>
</div>