I'm trying to finish my portfolio page for a web design/graphics business I'm going to be running soon, but I can't seem to get the larger view of an image to open beside the smaller image without pushing the rest of the page down.
Any help is greatly appreciate...
Here is my xhtml/css...
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Webfinity Design-Portfolio | Websites we have created...</title>
<meta http-equiv="Content-Language" content="en-us" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="main_layout.css" />
</head>
<body>
<!--Portfolio Images Start-->
<!-- Watts Mack Site -->
<div id="wm">
<a class="p1" href="http://www.macktrucks.com/wattsmack"><img class="thumbnail" src="images/wm2.jpg" alt="wm small" width="250px" height="138px" border="0" /><img src="images/wm2.jpg" alt="wm small" width="250px" height="138px" class="large" /></a>
</div>
<br />
<!-- Absolute Elite Clan Text -->
<ul>
<li><a href="http://www.ugly-cars.com/ae" title="Absolute Elite Clan" target="_blank">Absolute Elite Clan</a></li>
<li>A gaming clan for the FPS community</li>
<li>HTML, CSS, PHP, JAVASCRIPT</li>
</ul>
<!-- Absolute Elite Clan Site -->
<div id="ae">
<a class="p1" href="index.html"><img class="thumbnail" src="images/ae2.jpg" alt="ae small" width="250px" height="138px" border="0" /><img src="images/ae2.jpg" alt="ae small" width="250px" height="138px" class="large" /></a>
</div>
<br />
<!-- Big Mack Trucks Site -->
<div id="bm">
<a class="p1" href="http://www.bigmacktrucks.com/"><img class="thumbnail" src="images/bm2.jpg" alt="bm small" width="250px" height="138px" border="0" /><img src="images/bm2.jpg" alt="bm small" width="250px" height="138px" class="large" /></a>
</div>
<br />
<!-- Ugly-Cars Site -->
<div id="uc">
<a class="p1" href="index.html"><img src="images/uc2.jpg" alt="uc small" width="250px" height="138px" border="0" /><img src="images/uc2.jpg" alt="uc small" width="250px" height="138px" class="large" /></a>
</div>
<br />
<!-- Katsnet Site -->
<div id="kn">
<a class="p1" href="index.html"><img src="images/kn2.jpg" alt="kn small" width="250px" height="138px" border="0" /><img src="images/kn2.jpg" alt="kn small" width="250px" height="138px" class="large" /></a>
</div>
<br />
<!-- Taurus Club of America Site -->
<div id="tc">
<a class="p1" href="http://www.taurusclub.com"><img src="images/tc2.jpg" alt="tc small" width="250px" height="136px" border="0" /><img src="images/tc2.jpg" alt="tc small" width="250px" height="136px" class="large" /></a>
</div>
<br />
<!-- Matthew Klein Site -->
<div id="mk">
<a class="p1" href="index.html"><img src="images/mk2.jpg" alt="mk small" width="250px" height="138px" border="0" /><img src="images/mk2.jpg" alt="mk small" width="250px" height="138px" class="large" /></a>
</div>
<br />
<!-- End Portfolio Images -->
</body>
</html>
Code:
body
{
color: black;
width: 768px;
}
.resize img
{
border: none;
}
.resize:hover img
{
color: #FF00FF;
width: 800px;
height: 444px;
border: none;
}
.thumbnail
{
z-index: 1;
}
#ae .p1:hover .large
{
display: block;
position: relative;
left: 285px;
top: -138px;
width: 450px;
height: 249px;
border: 0;
z-index: 100;
}
#ae .p1 .large
{
display: block;
position: absolute;
width: 0;
height: 0;
border: 0;
}
#uc .p1:hover .large
{
display: block;
position: relative;
left: 285px;
top: -137px;
width: 450px;
height: 248px;
border: 0;
z-index: 100;
}
#uc .p1 .large
{
display: block;
position: absolute;
width: 0;
height: 0;
border: 0;
}
#kn .p1:hover .large
{
display: block;
position: relative;
left: 285px;
top: -137px;
width: 450px;
height: 249px;
border: 0;
z-index: 100;
}
#kn .p1 .large
{
display: block;
position: absolute;
width: 0;
height: 0;
border: 0;
}
#mk .p1:hover .large
{
display: block;
position: relative;
left: 285px;
top: -137px;
width: 450px;
height: 249px;
border: 0;
z-index: 100;
}
#mk .p1 .large
{
display: block;
position: absolute;
width: 0;
height: 0;
border: 0;
}
#wm .p1:hover .large
{
display: block;
position: relative;
left: 285px;
top: -137px;
width: 450px;
height: 249px;
border: 0;
z-index: 100;
}
#wm .p1 .large
{
display: block;
position: absolute;
width: 0;
height: 0;
border: 0;
}
#bm .p1:hover .large
{
display: block;
position: relative;
left: 285px;
top: -137px;
width: 450px;
height: 249px;
border: 0;
z-index: 100;
}
#bm .p1 .large
{
display: block;
position: absolute;
width: 0;
height: 0;
border: 0;
}
#tc .p1:hover .large
{
display: block;
position: relative;
left: 285px;
top: -137px;
width: 450px;
height: 245px;
border: 0;
z-index: 100;
}
#tc .p1 .large
{
display: block;
position: absolute;
width: 0;
height: 0;
border: 0;
}
Before you post, read our: 
