14 replies [Last post]
webcss123
webcss123's picture
Offline
newbie
Last seen: 11 years 46 weeks ago
Joined: 2008-10-29
Posts: 7
Points: 0

I have looked everywhere, nowhere I've found the answer:
How to create a 3 column design with a fixed browser-centered coloumn and 2 liquid side-bars:

- 1 left side-bar floated to left that expands to the browsers available left space
- 1 centered fixed-width column holding the main content
- 1 right side-bar floated to right that expands to the browsers available right space

In other words, I would like to create a centered design that has a "x-stretchable" background to its the left and a "x-stretchable" background to its right.

Box / Positioning ... ?

Anyone?

Ed Seedhouse
Ed Seedhouse's picture
Offline
Guru
Victoria British Columbia
Last seen: 40 weeks 2 days ago
Victoria British Columbia
Timezone: GMT-8
Joined: 2005-12-14
Posts: 3570
Points: 675

What content is to go in the

What content is to go in the left and right columns?

Ed Seedhouse

Posting Guidelines

Watch out! I am carrying irony, sarcasm and satire, and know how to use them.

webcss123
webcss123's picture
Offline
newbie
Last seen: 11 years 46 weeks ago
Joined: 2008-10-29
Posts: 7
Points: 0

No content in either side-bar

Actually no content needs to go in either left and right column. I just have columns to have a different background image on the right than from the left.
If you can think of another way, that's cool too.

Ed Seedhouse
Ed Seedhouse's picture
Offline
Guru
Victoria British Columbia
Last seen: 40 weeks 2 days ago
Victoria British Columbia
Timezone: GMT-8
Joined: 2005-12-14
Posts: 3570
Points: 675

I suspected that. That's

I suspected that. That's not a three column layout it's a one column fixed width layout. That's easy to do more than one way. One is to put your html in a single wrapper element, often a DIV, and give it a fixed width, then set margins to "0 auto;"

The width can be in percentages if you want it to expand to larger screen viewports.

Another is just to give padding or borders to the body element.

Ed Seedhouse

Posting Guidelines

Watch out! I am carrying irony, sarcasm and satire, and know how to use them.

scope1000
Offline
Regular
Last seen: 11 years 44 weeks ago
Joined: 2008-10-30
Posts: 33
Points: 0

Use background images for

Use background images for the inner and outer wrapper to create different images to the left/right of the fixed column

Untitled Document

body {
margin: 0;
padding: 0;
}
#fixedColumn {
width: 300px;
margin: 0 auto;
border: 1px solid #000;
}

Fixed Column

Fixed Column

Fixed Column

Fixed Column

Fixed Column

Fixed Column

Fixed Column

Fixed Column

Fixed Column

Fixed Column

Fixed Column

Fixed Column

Fixed Column

Ed Seedhouse
Ed Seedhouse's picture
Offline
Guru
Victoria British Columbia
Last seen: 40 weeks 2 days ago
Victoria British Columbia
Timezone: GMT-8
Joined: 2005-12-14
Posts: 3570
Points: 675

I missed the bit about

I missed the bit about diffeent images on the right and left, so yeah it is a three column set up then.

Ed Seedhouse

Posting Guidelines

Watch out! I am carrying irony, sarcasm and satire, and know how to use them.

webcss123
webcss123's picture
Offline
newbie
Last seen: 11 years 46 weeks ago
Joined: 2008-10-29
Posts: 7
Points: 0

Almost there

We are almost there.

The only problem with the following code is that when you apply a background color to the "#outerWrapper" of blue and a background color to the "#innnerWrapper" of red for example, the red background covers the whole screen.

What I am trying to do is:
Have a RED bg color to the left of the "fixedColumn" and have a BLUE bg color to the right of the "fixedColumn".

I have attached a picture of what it would look like at the bottom. THANKS AGAIN!

Here is the code with the red that covers the blue:

Untitled Document

body {
margin: 0;
padding: 0;
}
#fixedColumn {
width: 300px;
margin: 0 auto;
border: 1px solid #000;
background-color: #999999;
}
#outerWrapper {
background-color: #0000FF;
}
#innerWrapper {
background-color: #FF0000;
}

Fixed Column

Fixed Column

Fixed Column

Fixed Column

Fixed Column

Fixed Column

Fixed Column

Fixed Column

Fixed Column

Fixed Column

Fixed Column

Fixed Column

Fixed Column

AttachmentSize
3_Column_Layout.jpg 89.09 KB
scope1000
Offline
Regular
Last seen: 11 years 44 weeks ago
Joined: 2008-10-30
Posts: 33
Points: 0

Create a repeating

Create a repeating background image where one side is blue and the other red then attach it via css, as a background image, to one of the wrapper . Make sure its positioned centrally, i.e., so the seam runs behind the fixed column

.

Make sure you have enough blue and red on both sides so so that when the browser window is widened you don't end up with white space either side.

webcss123
webcss123's picture
Offline
newbie
Last seen: 11 years 46 weeks ago
Joined: 2008-10-29
Posts: 7
Points: 0

support for high resolution

Thank you "scope1000" for your suggestion but the website needs to support high resolution monitors (infinite width). So having a set width background image is not an option unfortunately. Ultimately, the blue and red background colors will be replaced by 2 high definition images. For the sake of keeping this BASIC, we can work with the background color attribute for now.

Any other suggestion?

Triumph (not verified)
Anonymous's picture
Guru

webcss123 wrote:Thank you

webcss123 wrote:

Thank you "scope1000" for your suggestion but the website needs to support high resolution monitors (infinite width). So having a set width background image is not an option unfortunately. Ultimately, the blue and red background colors will be replaced by 2 high definition images. For the sake of keeping this BASIC, we can work with the background color attribute for now.

One image is still the better suggestion. You can make the background image 38,000px wide and center it horizontally and vertically and even fix it in place. Just be conscious of your load time.

webcss123
webcss123's picture
Offline
newbie
Last seen: 11 years 46 weeks ago
Joined: 2008-10-29
Posts: 7
Points: 0

Thanks for stopping by

Thanks for stopping by Triumph.
Having one background image does not work because of the load time. The site has to load instantaneously. (Keep images small)

There's got to be a way, I am sure.

Triumph (not verified)
Anonymous's picture
Guru

Instantaneous is a bit

Instantaneous is a bit idealistic even on an internal network. Also, two "high definition" images on either side isn't going to be much faster than one behind all.

Can you show a mock up of what you are actually trying to achieve?

webcss123
webcss123's picture
Offline
newbie
Last seen: 11 years 46 weeks ago
Joined: 2008-10-29
Posts: 7
Points: 0

Repeat-x BG

What I have to achieve is use a different BG image on the left and a different BG on the right of a centered website. Both those 2 BG images will be fairly narrow and will be repeated - x . This is how I will be able to save 1,000 of kb and keep my inpatient web surfers on my site.

I do not have a mock up at this time. First I would like to get the technical obstacles out of the way.
Thanks again for your help.

webcss123
webcss123's picture
Offline
newbie
Last seen: 11 years 46 weeks ago
Joined: 2008-10-29
Posts: 7
Points: 0

Repeat-x BG

What I have to achieve is use a different BG image on the left and a different BG on the right of a centered website. Both those 2 BG images will be fairly narrow and will be repeated - x . This is how I will be able to save 1,000 of kb and keep my inpatient web surfers on my site.

I do not have a mock up at this time. First I would like to get the technical obstacles out of the way.
Thanks again for your help.

wolfcry911
wolfcry911's picture
Offline
Guru
MA, USA
Last seen: 6 years 30 weeks ago
MA, USA
Timezone: GMT-5
Joined: 2004-09-01
Posts: 3224
Points: 237

It sounds like you're trying

It sounds like you're trying to ford the river before you've laid eyes upon it. Your requests thus far have shown something that's easy to do with a single image repeating vertically, but now you want it to repeat horizontally. Bear in mind that there are plenty of sites out there that use a single large images as a background and they don't lose many visitors because of it. Create a mock-up so that the people here can better help.