CSS Layout - 3 column with stretchy background

Question

I am building a 3 column fluid layout, and have gotten 90% the way there. I am wondering on what is the best way to impliment the background, or side bars - however you want to look at it.

enter image description here

I have a good box hack that centers my main content area, and now I need to impliment the two stripes you see on either side that has a small 1px border on the respective inside border.

I could create a 1px high stripe that is 1000's of pixels wide, but I have a feeling there is a much better way to do this - possibly with pure CSS?

Am I now looking at a 5 column layout here, or is this still a three column fluid?

If anyone can provide a good pattern or link for this style of layout (its probably the most common out there nowadays, huh?) I'd really appricaite it!

Here is my current fluid wrap code:

css:

body
    {
        margin: 10px 0px;
        padding: 0px;
        text-align: center;
    }
    #siteWrapper
    {
        width: 980px;
        margin: 0px auto;
        text-align: left;
        padding: 15px;
        background-color: #fff;
    }

HTML

<body>

<div id="siteWrapper">
</div>

</body>

Here is a link to that image above to make it easier to read: http://i.stack.imgur.com/aRw8T.jpg — Shawn J. Molloy, Apr 20 '12 at 22:23
http://www.manisheriar.com/holygrail/index.htm could work for you — Dean_Wilson, Apr 20 '12 at 23:01
Yes, that seems like it coudl be modified to fit my needs; if I am able to set the width of the inner box. I will give it a shot. Thanks! — Shawn J. Molloy, Apr 20 '12 at 23:56

score 0 · Accepted Answer · answered Apr 20 '12 at 22:25

0

body
{
    margin: 10px 0px;
    padding: 0px;
    text-align: center;
    background: whatevercolor;
}
 #siteWrapper
    {
        width: 980px;
        margin: 0px auto;
        text-align: left;
        padding: 15px;
        background-color: #fff;
        border-left: whatever;
        border-right: whatever;
    }

answered Apr 20 '12 at 22:25

squarephoenix

1,003
7
7

assuming he doesn't want any content inside the sidebars?? – Dean_Wilson Apr 20 '12 at 23:26
No content inside the sidebars, but they should grow (?) yes, I am pretty sure that is the case. What is the best practice for this layout (seems like it'd be very common...) – Shawn J. Molloy Apr 20 '12 at 23:54

CSS Layout - 3 column with stretchy background

1 Answers1