[thelist] 3 column liquid CSS layout... needs two columns in second column. Please help.

Ken Wan kwan at tourismwhistler.com
Mon Feb 9 14:50:08 CST 2004


First, thanks to everyone who has been helping me with my CSS questions.
Please bare with me as I continue working on my current project.
Unfortunately, because the site is in development, I am unable to provide
any links to show what I wish to do so I will try to describe things the
best I can. So far, things are going pretty well, but as I add
features/functionality and the site gets more complex, I am starting to
encounter difficulties that I can¹t seem to resolve on my own. That¹s where
you great folks come in.

As my subject line indicates, I am working on a liquid, 3 column, CSS
layout. Everything works fine (some weird quirks in IE-PC but I¹ll try to
address that one later). However, within the center column, I have content
that spans the entire width. Below this content, I wish to have two columns
of content. I tried the following, but it does not seem to want to work:

For my CSS file, the center column has the following style attributes:
#centercontent
{
    margin: 20px 179px 10px 169px;
    voice-family: "\"}\"";
    voice-family: inherit;
    margin: 20px 181px 10px 171px;
}

Within the center column, there are going to be photos embedded, aligned to
the right. Here¹s the code:
#centercontent img
{
    position: relative;
    border-color: black;
    border-width: 1px;
    border-style: solid;
    margin: 0px 20px 10px 10px;
    float: right;
}

I created two new styles for the two columns:
#centercontent .left
{
    position: absolute;
    margin: 0px 52% 0px 20px;
    border-color: black;
    border-width: 1px;
    border-style: solid;
}

#centercontent .right
{
    position: absolute;
    margin: 0px 20px 0px 52%;
    border-color: black;
    border-width: 1px;
    border-style: solid;
}

In the xhtml file (content), I am using the following code:
<div id="centercontent">
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam
nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat
volutpat. Ut wisi enim ad minim veniam, quis nostrud exercitation ulliam
corper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
    <img src="/images/egret" alt="egret" />
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam
nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat
volutpat. Ut wisi enim ad minim veniam, quis nostrud exercitation ulliam
corper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam
nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat
volutpat. Ut wisi enim ad minim veniam, quis nostrud exercitation ulliam
corper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
    <p class="left">Lorem ipsum dolor sit amet, consectetuer adipiscing
elit, sed diam nonummy nibh euismod.</p>
    <p class="right">Lorem ipsum dolor sit amet, consectetuer adipiscing
elit, sed diam nonummy nibh euismod.</p>
</div>

So there are a few problems. It seems that within this center column, the
left one appears as designed. However, the right one, instead of being
aligned right according to the dimensions of the div, it is aligning at the
extreme right of the browser. In addition, I have an image in the content
above the two columns. If the browser window is maximized, there isn¹t
enough content to keep the two columns further down the page and they end up
overlapping the photo.

I¹ve tried changing the position attribute to ³ position: relative;² but
that causes the right column to start below the left column (the alignment
within the div is fixed though).

I know I¹m missing something but don¹t quite know what that would be.

Please help me. If you have any questions or insights, please let me know. I
greatly appreciate your help.

Ken


More information about the thelist mailing list