Jump to content

Display problem - space between image and DIV


bassdog65

Recommended Posts

I know I have dealt with similar issue like this in the past, but I think I am just out of practice.  I have dissambled the page I am trying to make to just basic DIVs, and nothing else, to try and solve my problem, and alas, I turn to the experts.

 

I color coded all of the DIVs to show where they are, but they will obviously not have background colors in the final product.  The live page can be seen at http://sandbox2.premierw.com/index.php

 

Basically at the bottom of my main DIV, there is an image that needs to hug the bottom of the left and right DIVs, and there is a 1px space between it and the actual DIV.  If I was using tables, I would know how to fix it, but I want to avoid that and move into the future by only using CSS, but I am pulling my hair out.

 

Here is the code:

<?php 
$page_title = 'Test';
session_start(); 
?>

<!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" xml:lang="en" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<title><?php echo (isset($page_title)) ? $page_title : 'Welcome!'; ?></title>
<style>
body {
background-image: url(images/heartland_bg4.jpg); 
background-repeat:repeat;
}
.wrapper {
width:900px;
height:600px;
margin:auto;
    background-color:white; 
}
.innerwrapper {
width:900px;
height:500px;
    background-color:silver; 
}
.top {
background-color:blue;
}
.bottom {
background-color:fuchsia;
}
.left {
width:200px;
height:100%;
float:left;
background-color:orange;
}
.right {
background-color:red;
width:700px;
float:right;
}
</style>
</head>
<body>
<div class="wrapper">

	<img src="images/top.png" alt="top" style="display:inline;">

		<div class="innerwrapper">

			<div class="left">
			<p>Left</p>
			</div>

			<div class="right">
			<p>Right</p>
			</div>

		</div>

	<img src="images/bottom.png" alt="bottom" style="display:inline;">

</div>
</body>
</html>

 

Help!

Link to comment
Share on other sites

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.