Adding two image holders to my CSS?

HTML & CSS
1

Hello All,

I’m trying to create something for my local football team that I would really like some help with if possible.

I have a CSS file with a wrapper like so which fits into a 800x600 screen resolution like so with a grey background:

Source Code

Now what I want to do is place two image holders (120px wide, 600px high) alongside the wrapper, with one to the left and one to the right exactly like this screen grab I created in photoshop (The purple and red images)

How I would like it to look

But at the same time for a 800x600 screen resolution not to show the holders (as scrolling would be required along the bottom, which I don’t want) but other bigger resolutions will.

I’ve tried doing this and floating the images, but they are all over the place in different resolutions. Can anyone kindly help?

Here’s my CSS:


DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Template Website</title>
<style type="text/css"> 
/* Start the stylesheet */
 
* { padding:0; margin:0; }
body { font:normal normal normal 10px Verdana,Helvetica,Arial,sans-serif; background:#666; color:#000 }
 
#wrapper { 
margin: 0 auto; 
width: 980px; 
padding: 12px; 
background-color: #FFF; 
overflow:hidden;
height:600px;
}
 
</style>
</head>
<body>
 
<div id="wrapper">
</div>
 
</body>
</html>

Thanks

Chris

2

Hi,
This was a recent subject in the CSS Quiz. See quiz#24(1) for the solution.

It would be one of the first two code examples in that post.

3

Magic - thanks

4

In my demo you will need to set position:relative on the middle column to allow links to be clicked otherwise they slide under the absolute elements above.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
html,body{
    margin:0;
    padding:0;
}
h1,p{margin:0 0 1em}
#page {
    width:760px;
    margin: auto;
    text-align:left;
    background:red;
[B]        position:relative;
        z-index:2;[/B]
}
#adholder {
    width: 100&#37;;
    overflow: hidden;
    position: absolute;
    top: 0;
    left: 0;
}
#adinner {
    width:760px;
    margin:auto;
}
.adright,.adleft {
    width:160px;
    position: relative;
    margin:0;
    float:left;
    height:600px;
    overflow: hidden;
    background:#52b502;/* for testing */
    z-index:99;
        display:inline;
}
.adright{float:right;left:170px;}
.adleft{left:-170px}

</style>
</head>
<body>
<div id="adholder">
<div id="adinner">
    <div class="adright">Advert goes here</div>
    <div class="adleft">Advert goes here</div>
</div>
</div>
<div id="page">
<h1><a href="#">Centred page content goes here</a></h1>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
</div>
</body>
</html>

I’ve updated my answer in the quiz to reflect this.