2 or 3 Colum layout with tiliing background

[raj77]

Hello Paul,

Been a while since i've chkd the formus here.
I have a small query, have been tryin to wrk out a method to perfect a 2 or 3 column layout with tiling bg which is not wrkin.

I referred to the SitePoint book i purchased in which it says using Javascript I can acheive the same. Is there a way to do so w/o using js ??

I wrked on a sample, the code for whick is below, pls have a look and show a way out. Thanks,

style defined i the head tags as below:
<style>
#left {
float: left;
width: 200px;
}
#center {
margin-left: 210px;
margin-right: 210px;
background-color: #ccc;
}
#clear {
clear: both;
}
</style>

in my body this is what's ther:
<div id="wrapper">
<div id="left">
raj left column<br><br>raj left column<br><br>raj left column<br><br>raj left column<br><br>raj left column<br><br>raj left column<br><br>raj left column<br><br>raj left column<br><br>raj left column<br><br>raj left column<br><br>
</div>

<div id="center">
kjhdfkjg hsdkfg<br><br>kjhdfkjg hsdkfg<br><br>kjhdfkjg hsdkfg<br><br>kjhdfkjg hsdkfg<br><br>kjhdfkjg hsdkfg<br><br>kjhd<br><br>
</div>
<div id="clear"></div>
</div>

Once i run this file, u'll notice the grey bg for the center div does not meet the lenght that of the left div.

Please find a way out for me, else i'll have to revert to an HTML solution to the same.

Thanks,
Raj

[raj77]

nother issue with the above, i can't set the body a background color attribute since theres other on the page as well.
the kinda page i'm referrin to is :
http://www.shaadi.com/partner_search...ord-search.php.

In the above link the grey patch needs tiling using css, so pls suggest accordingly.

thnx

[Paul O'B]

Hi,

Well nearly all the techniques for equalising columns are covered in the 3 col demo sticky thread and either involve using negative margins or a repeating background image.

The simplest method is just to repeat a background gif down the side of the main container and then float your left content on top of that. There are examples of 2 column layouts in the demo that show both these methods so its not worth going over them again here.

I wasn't quite sure what I was looking for in the above link but the answer will be the same if the question is about equalising column etc.

Obviously you can only set one colour for the body background so I'm not quite sure what you mean. Of course you can wrap your page up in another outer and give a background to that - if thats what you meant.

Have a look at the 3 col demo and if it doesn't answer your question then come back and I will try and offer some specific code for you

Paul

[raj77]

Hi Paul,

thnkx for your prompt reply. well i had infact seen the 3 page layout from the link u provided b4 postin my message. there-in u mentioned passing attributed to the body tag

body {
padding:0;
margin:0;
background:#eee;
color: #000000;
}
and this one

html>body #outer{height:auto;} /*for mozilla as IE treats height as min-height anyway*/

like i said since the body bgcolor is yellow on
http://www.shaadi.com/partner_search...ord-search.php

the pag bove can't pass it to the LEFT panel where i have some partner srch links, etc...

nwyas like u mentioned, guess i'll have to use a bg img, or

may be i can try incorporatin HTML framewrk for the left + content area.
only framewrk, rest of the details within can be done usin DIVs.
Hope the above doesnot affect my page d/l speed largely.

thnx,
Raj

[Paul O'B]

nwyas like u mentioned, guess i'll have to use a bg img, or

A bg image is the easiest solution. You should make the image as wide as the column but make it about 5pixels high. Any smaller and it takes too long too redraw and any bigger then it adds to the page load.

If you look at my demos you see that the backgrounds load quick enough not to woory about and the background image should be less than 1k anyway unless you are going for some complicated effect.

Paul

[raj77]

hi Paul,

thnx for the optinos provided, am using a background image, since it wrks pretty well, just need to chk the same in IE 5.0 and NS 7.0.

I'm not sure but i think the pages should work fine in th Mac browsers as well.

Regards,
Raj

[Paul O'B]

If you have a link to the page I have ie5 installed and can check for you if you want

Paul