Hi all -
I'm sorry to repeat my question, and it was my bad for not realizing
you can't embed links in text on this list, but I can't seem to
figure out how to do this right - the content in the columns always
busts out of the surrounding div when I try to have 2 columns inside it.
When it's just a div with content (no columns) the div stretches to
fit the content. When I put one column to the left (relative) with a
fixed width, both the column div and the surrounding content div
stretch to fit the content, without the column going outside the
content div.
But if I try to put 2 div columns in underneath the h1 and h2 (which
stretch across the div and are flexible) , all bets are off. I tried
to make both columns relative, but then they only stack up on top of
each other - I would like them side by side. If I keep the right
column div absolute, they stay side by side but the right-column div
goes out of the containing content div.
As I mentioned before, I used Eric Meyer's complexspiral as a
starting point and adapted it, but I'm not sure what else to do if I
want those columns. I know that he uses negative margins, but I don't
understand how they actually work and what they accomplish.
Here's the style sheet for the page:
body {background: #2c3031 url(images/bree-bg.jpg) 0 0 no-repeat fixed;}
div#content {background: #2c3031 url(images/bree-fade.jpg) 0 0 no-
repeat fixed;}
div#links a {background: transparent url(images/bree-fade.jpg) 0 0 no-
repeat fixed;}
div#links a:hover {background: transparent url(images/bree-wash.jpg)
0 0 no-repeat fixed;}
Here's the code for the page:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"
"http://www.w3.org/TR/REC-html40/strict.dtd";>
<html>
<head>
<title>Multimedia</title>
<link rel="stylesheet" title="Shell (Default)" href="shell-bg.css"
type="text/css" media="screen">
<style type="text/css">
<!--
body {position: relative; margin: 0; padding: 0;}
div#content {
position: absolute;
top: 26px;
left: 175px;
right: 25px;
color: #FFFFFF;
padding: 10px;
border: solid #99cc77;
font-family: Georgia, "Times New Roman", Times, serif;
font-size: small;
font-weight: normal;
bottom: 25px;
}
div#content p {
margin: 0 1em 1em;
bottom: 10px;
}
div#content h3 {margin-bottom: 0.25em; color:#ffc4d9;}
div#links a {display: block; text-align: center; font: bold small
Arial, Helvetica, sans-serif 1em sans-serif;
padding: 5px 10px; margin: 0 0 2px; border-width: 0;
text-decoration: none; color: #ffe2c4;}
div#links a:hover {color: #556677;}
h1 {
text-align: center;
color: #024;
letter-spacing: 0.5em;
text-transform: lowercase;
font: bold italic 25px Georgia, "Times New Roman", Times, serif;
height: 50px;
vertical-align: middle;
white-space: nowrap;
background-image: url(images/casey-banner.png);
background-repeat: no-repeat;
background-position: center;
margin-top: -9px;
margin-right: -9px;
margin-bottom: 0.5em;
margin-left: -9px;
padding-top: 5px;
padding-right: 0;
padding-bottom: 5px;
padding-left: 0;
}
h2 {
margin: -9px -9px 0.5em;
padding: 5px 0 5px;
text-align: center;
color: #ffffff
;
letter-spacing: 0.5em;
text-transform: lowercase;
font: bold italic 25px Georgia, "Times New Roman", Times, serif;
}
dt {font-weight: bold;}
dd {margin-bottom: 0.66em;}
div#content a:link {color: 77bbcc;}
div#content a:visited {color: #77bbcc;}
div#content a:link:hover {color: #99cc77;}
div#content a:visited:hover {color: #99cc77;}
div#links {
position: absolute;
top: 28px;
left: 72px;
width: 100px;
height: 700px;
font: 12px Verdana, sans-serif;
}
code, pre {color: #EDC; font: 110% monospace;}
a:link {
text-decoration: none;
}
a:visited {
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
a:active {
text-decoration: none;
}
.left-col {
border-top-width: thin;
border-right-width: thin;
border-bottom-width: thin;
border-left-width: thin;
border-right-style: solid;
border-top-color: #FFFFFF;
border-right-color: #FFFFFF;
border-bottom-color: #FFFFFF;
border-left-color: #FFFFFF;
position: relative;
width: 200px;
}
.right-col {
position: absolute;
left: 225px;
top: 120px;
margin: -9px -9px 0.5em;
padding: 5px 0 5px;
right: 45px;
overflow: hidden;
}
-->
</style>
Thanks in advance, Alicia Morgan
______________________________________________________________________
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
