Sent by Allan Douglas on 10 July 2007 00:12
Hi Alicia,
At Ruthsarian Layouts Tank! there is a two column css that can be
used in any element. I have used this in some of my pages & it seems
to work & play with all the browsers.
Variations of it are in www.vtneaprofessionalprograms.org. The 3
boxes in the center are using a 3 column variation.
Allan
DDGraphics WebMedia
25 Nash Road
Cummington, MA 01026
(413) 634-5372
Skype: allanddg
[EMAIL-REMOVED]
When confronted by a difficult problem, you can solve it more easily
by reducing it to the question, "How would the Lone Ranger handle this
On Jul 9, 2007, at 2:12 AM, Alicia Morgan wrote:
> 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-REMOVED]]
> 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/
______________________________________________________________________
css-discuss [EMAIL-REMOVED]]
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/
