Hello all:
I have managed to create a three-column web page with CSS for the most part.
I have included both the page and the CSS below.
The page is working for the most part except I have one issue, try as I may, I cannot seem to fix.
If I resize the browser window, be it Internet Explorer or FireFox, the right column moves to the left and sits on top of the middle column.
I want it to stay put on the right-hand side like it was intended to do and if I resize the browser the scrollbar at the bottom should be used to move to the right.
Any ideas experts?
Thank you,
--d
============ HTML Code ===========
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//EN">
<HTML><HEAD><link rel="stylesheet" href="ss_main.css" type="text/css" media="all" /></HEAD>
<BODY>
<div id="header"><img class="logo" src="logo.gif" /></div>
<div id="pgtop"><img class="cafelogo" src="cafe_logo.jpg" /></div>
<div id="left_column">
<div id="Cafe_id" ></div><script type="text/javascript">
var fo = new FlashObject("Scroll.swf","
Cafe","230
","600","6
","#FFFFFF
");
fo.addParam("menu","false"
);
fo.addParam("quality","bes
t");
fo.addParam("scale","nosca
le");
fo.addParam("salign","LT")
;
fo.addParam("wmode","windo
w");
fo.write("Cafe_id");
</script>
</div>
<div id="right_column">
<P>There is stuff here.There is stuff here.There is stuff here.There is stuff here.There is stuff here.There is stuff here.There is stuff here.There is stuff here.
</div>
<div id="center_column">
<center><h2>Heading For Content</h2></center>
<center><IFRAME NAME="maincontent" ID="MAINCONTENT"
SRC="
http://www.google.com" WIDTH="650" HEIGHT="500" MARGINWIDTH="0"
MARGINHEIGHT="0" ALIGN="TOP" FRAMEBORDER="0" SCROLLING="AUTO"></IFRAME>
</center>
<div id="inside_footer">
<center><P>There is stuff here.There is stuff here.There is stuff here.There is stuff here.There is stuff here.There is stuff here.There is stuff here.There is stuff here.</center>
</div>
</div>
</BODY></HTML>
============ HTML Code ===========
============ CSS ===========
body {
background-color: #FFC000;
font-family: Verdana, Helvetica, Arial, sans-serif;
font-size: 12px;
color: black;
margin: 0;
}
img {
border-style: none;
}
img.logo {
margin: 0px 0px 0px 20px;
}
img.cafelogo {
margin: 10px 0px 0px 170px;
}
a {
color: #007129;
text-decoration: none;
}
a:hover {
color: #007129;
text-decoration: underline;
}
/* pgtop: backgrounds for the very top can be placed here; only encompasses the top nav area; helps contain area */
#pgtop {
background: #B8B1A1 url(cup.png) fixed no-repeat top right;
width: 100%;
height:70px;
margin: 0;
padding:0em;
}
#left_column {
position: absolute;
left:10px;
top:100px;
width:250px;
background:#fff;
border:1px dashed #740000;
}
#center_column {
background:#fff;
margin-top:13px;
margin-left: 266px;
margin-right:248px;
border:1px solid #740000;
voice-family: "\"}\"";
voice-family: inherit;
margin-left: 266px;
margin-right:248px;
}
html>body #center_column {
margin-left: 268px;
margin-right:249px;
margin-top:15px;
}
#right_column {
position: absolute;
right:10px;
top:100px;
width:230px;
background:#fff;
border:1px dashed #740000;
}
#header {
background : #fff;
width: 100%;
margin:0;
padding:0em;
}
#inside_footer {
background : #740000;
width: 100%;
clear:all;
margin-top:10px;
padding-top:.5em;
padding-bottom:.5em;
color: #fff;
}
============ CSS ===========
Start Free Trial
