Hi,

In advance I'm sorry this is long and hope it makes sense....

I have a few uploaded examples of a site I'm currently re-building in CSS. Initially I'd like some tips on the coding itself, the CSS is uploaded aswell so hopefully you will be able to view the CSS and HTML.

www.j27.tv/TEMPLATE.html

Here it is so far as you can see it's midway through the build. The problem I encountered revolves around me having 3 divs side by side. a left bar "leftbar", a right bar "rightbar", and a central section "header" which also leads into several more divs containing the "banner" and "maincontent" etc.

I have a feeling I may not be doing this correctly, but the issue is that as the "header" children divs extend downwards, the two bars left and right need to grow with it to stop the content spilling out. as it stands it means as I get below the two side divs the content begins to fill the whole width of the container div "mainbody" (1000px)

I need to make it so that the two side bar divs will grow relative to what is in the central section.





Additionally, and not that important I had a go with static positioning on the left and right bars so that just the central section scrolls:
however, first and foremost the effect doesnt work on IE8, and on the other browsers, the whole thing falls apart, as the "header" automatically drops to the left. i have an example here:

http://www.j27.tv/TEMPLATE2.html



I hope some of this made sense and you can de-construct my CSS. I have not been doing this long so I just hope it's not terrible coding.



Thanks in advance

use the review forum.

Sorry, I'm new, plus I don't neccessarily need a review I need help with the CSS coding, not sure where to post if not here?

thanks

For what you are trying to accomplish here, you don't need a 3-column layout, because there's no content in the sidebars. What you really need to do is have a background div with the background image within it, put a div within that centered with your main content, and be done. The layout will then resize with additional content. If you intend to add content to those sidebars, however, check the sticky threads in this section for 3-column layouts. Post back with specific problems as needed.

tim

Thank you for this, I'll get to work on this right away and post back if I have any problems!

Thanks

As a follow on. New problem. Built the site in CSS, however, I have a problem with scrolling and absolute positioning, any help would be greatly appreciated.

http://www.j27.tv/test100.html

I have set the background to fit the browser window, and absolutely positioned top left. The central section is another div, also set to absolutely position to the top and centre. However, I would like it so that on the right hand side of the page is a navbar, which when used will only move the central div (ie the bg stays static the content scrolls) I hope I'm not wrong in thinking absolute positioning is the problem, but can anyone advise me how to achieve this effect?


thanks in advance

You're not going to be able to do what you want with everything set to position:absolute. You want something that will flow - and you've nailed everything in place so it CAN'T move.

OK well, I'm still stuck but I guess my questions would be...

I've created a background absolutely positioned to fill 100%. However, I now want to add another div on top of this with my content, which will be scrollable. I need it to be at the top of the screen so I can't absolutely position it. I don't think I can place it within the background div because it needs to be a certain width (714px)

So how do I get my new div content to start at the top of the page without AP?

Hope this makes sense

I need it to be at the top of the screen

With nothing above it, that's where it would go by default anyway.

Thankyou. Fixed, or compromised. One final thing before it's done.

http://www.j27.tv/test.html



Thanks for all your help