Alternative ways to achieve this layout...

[madcat]

In a two-column layout...

Is it at all possible to setup your page so that one column is specified in pixels, and the other column is specified in percentages...and get the total equal to 100 percent of the page.

I'm having a problem getting my layout to work. I have a picture that's 386px wide. The navigation menu needs to go under that picture...it has a white background. Right now I have the other column, the content section, set up so that its left margin is 386px from the left...they are both set absolute.

The content sections background color is light brown. When content fills the section, everything is fine and the content section is longer than the menu. But when it isn't filled the content sections comes up exposing the white body background color. I need a way for the content section to always stay longer than the menu no matter what info fills the <div>. That way, you always see the content sections background color and it takes up the whole side of the page.

I thought another way I could do it was float the <div>'s and put a footer at the bottom by clearing both <div>'s...but you have to specify a width for float so...how can one be a pixel, and another a %.

I thought about making the image a vector graphic and importing it as Flash so that it scales up and down according to screen resolution, but I don't know if that's the best bet.

Any suggestions?

>> You can see this site in my profile, the difference between the categories in the menu...

[synotic]

If I were trying to achieve that particular layout... this is what I'd do.

I'd make my first sidebar div fixed at whatever size, in your case 386px. Then make it

float: left

. Then inside you can put your image and all the navigation.

Then put a second div, this is your content div. Give it no width, by default it will stretch to the full size of the window. Put your text and footer inside it... you'll notice that even though the div stretches to the full width of the window, the text will only start after the floated navigation div. This is useful but you don't want the text to be right next to navigation probably. Therefore put in a padding of about 406px (486px + 20px).

Now you should have the basics of your layout, but of course there is the problem of all the backgrounds are currently white... you want the background to be brown, regardless the amount of text inside of it. To do this, give the body a background color of brown. This makes everything brown... luckily we can set a background image and background color. So make a pure white gif that's exactly 386px wide and about 50px tall (if you make it too small vertically it can slow down some browser that have to tile something thousands of times). Then in your body selector you should have something like this:

body { background: url(white.gif) left repeat-y brown }

What this does is give the entire page a brown background, then on top of it, it tiles vertically, but not horizontally, your white gif on the left side of the page.

HTH :)

P.S. I really like your site's design but I should tell you that in IE 5:mac, Mozilla based browsers and KHTML based browsers it leaks over about 50 pixels, also the logo sometimes is misplaced. If you decide to follow my layout it should be a lot more flexible. I think you'll find that relying less on absolute positioning will make your site better anyways :)

[bill]

Take a look at the advice given in this thread: [Tableless layout] Two divs withs with right aligment [webmasterworld.com]

[madcat]

synotic: Thanks, that's a great suggestion. The problem is I can't seem to declare both the background color and the background image within the body tag. My background color is actually a gif I made in Fireworks so I think that's screwing up the styles...

I created an HTML selector and put the background-color in that...

HTML { background-color: url(...); }

Is there anything wrong with setting the background color in the HTML tag? Is there some way to get an image- background image and an image- background color in the BODY declaration?

Thanks for any help!

[synotic]

Well the <html> tag isn't part of the display so everything has to be in the body tag. So that's probably one of your problems :)

Secondly you're using the "background-color" property and feeding it an image with url(). If you want to use each individual property you can do:

background-color: #9ac7cb;
background-image: url(blue.gif);

Or (my preferred method), just use the shorthand notation:

background: #9ac7cb url(blue.gif);

It's simpler than some of the other shorthands in that all you have to do is put down the values of any of the "background-" properties in "background:". If that makes any sense... The WestCiv guide [westciv.com] probably can explain it better though. I love it as a quick reference.

And then of course set the appropriate background-repeat and positioning. I believe I have an example of it all put together in my earlier post.

[madcat]

Ok, so there is no way to include two image background colors like:

background-color: url();
background-image: url();

...then combine them into one statement.

the problem seems to be that I can't include two gif images in the body {}, one for the body background and one for the background image. I have a white.gif that's 385px wide...that is for the fixed width menu column.

I also have a backgroundContent.gif I would like used for the body background.

I simply need the white.gif to fill 100% of the left side of the screen. And the backgroundContent.gif to fill 100% of the right side.

[Shadows Papa]

This MAY not be at all what you are after, but I use one gif for the body background - it's a small image that repeats both x and y. I then have a DIV that is my main content, it's got margins that are the same size as the background image in the body. I use a DIFFERENT image for the background of the content DIV.
This gives me a border around the DIV (the body background image) and an image in the background of the DIV - our logo.
Pretty cool as the DIV background is really faded more like a "watermark" that is our logo - both the borders and the background watermark stay put while you scroll content. I've been asked more than once by those who know nothing of CSS how I managed it. I really want to tell them it's magic and real hard to accomplish........

My CSS is obviously amateur but I'm learning.... thanks to these forums.

I also have a few pages with column defined via CSS, and use different backgrounds in those as well - helps to define the columns, I believe.

body {
/*Background-Image: url
Background-Image: url(../images/qb2.gif);
Background-repeat: repeat;
Background-Attachment: fixed ;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 13px;
}

.content {
background-color: #ffffff;
Background-Image: url(../bgrnd2.jpg);
Background-Attachment: fixed ;
Background-Repeat: No-Repeat ;
background-position: top center ;

Shadows Papa

[madcat]

Thanks...

Any other ideas? I just want to tile one gif 100% vertically, and another gif the same within one document...

[synotic]

Ok, so there is no way to include two image background colors like:

background-color: url();
background-image: url();

...then combine them into one statement.

the problem seems to be that I can't include two gif images in the body {}, one for the body background and one for the background image. I have a white.gif that's 385px wide...that is for the fixed width menu column.

I also have a backgroundContent.gif I would like used for the body background.

I simply need the white.gif to fill 100% of the left side of the screen. And the backgroundContent.gif to fill 100% of the right side.

The background-color property takes a color value and the background-image property takes an url value. You can't swap different values for different properties. It would be like doing position: bold or font-size: left. Wanting to have multiple background images is a common request and in other instances it can get a lot more complicated like having drop shadows or rounded edges on boxes. But in your case you don't need to have multiple background images. In fact you shouldn't even have to have an image at all. Just two colored backgrounds, but CSS currently provides no mechanism to do that. Using a GIF for the white part and a simple hex value for the other color is a workaround that lets you use two colors.

So what you do is first give the body a background color of brown...

background: #e7cb94;

Then you can tile, over the brown background color, your white background image:

background: url(images/white.gif) #e7cb94;

and then to make sure your white is tiled and positioned correctly:

background: left repeat-y url(images/white.gif) #e7cb94;

Does that make sense? If I am understanding you correctly then this should do what you want without trying to use two different background images... it also saves all the bytes and processor it takes to load and tile a second image.

[madcat]

I'll quit being an ultra-baby fat. I just wanted things my way. I wanted a gif (because of its color) to be the body background color- and I also wanted the white.gif image repeated vertically...all within body. I'll just have to use a regular color for the body now...

still in my profile.

Thanks for your help!

[synotic]

I'm confused why you can't just represent the brown with a background color?

[madcat]

Well, the thing is I cannot find a background color light enough for the layout. For example, I put a shade of white and turned the opacity really low over a darker brown. Gave me a great color that worked well. You can see it in my profile, it takes up the first 140px of the content gif...nothing else really looks right for me but I'll experiment with it.