please view in IE or Firefox where you will see it working fine then take a look in Chrome and you will see my problem. For the life of me I cant figure out why the left column is collapsing an why the brown navigation area is repeating.
I’d need to see the page to answer specifically but if you have floated the left and right columns then you don’t need to set heights on them but just ensure that content underneath is cleared. let the content of the columns dictate their height.
If you are looking for an equal column effect with full dividing borders and different background colours for each column then things are not so simple. It depends on the exact requirements/design etc.
To collapse a column you could use this overflow method assuming that one column has a width and then the other column takes up the rest of the space whether the column is there or not.
It may be easier if you need all the above then just to use a two celled table for those specific effects.
Ok, I am bitting the bullet and switching to using divs insead of tables.
I know I still have to clean up the css into cleasses which I will do but I just need to focus on getting the div elements to behave and there are two areas I am not sure on.
Firstly the length of the two dynmic div elements being ‘left’ and ‘right’ which make up the main content areas of the site. As these can be variable length based on the page. I need the elements below to be positioned relative to the length of the elements above, i.e they move down if the element is longer.
the second issue is the right element is the main content and on some pages I dont want teh left element to be visible and the right element to streach arcosss the entire page.
What I am trying to achieve is the right and left columns have a dynamic width so the content stays in the midle regardless of the width of the browser.
That’s not what I see in Firefox whch you said was working. Firefox shows a fixed width table of 975px centred in the screen. If you add the code I gave you above then all other browsers behave the same also with a centred layout of fixed width.
I’m not sure what you mean by dynamic width of the columns either. Assuming you want columns to expand to accommodate content then they would eventually be 100% wide if stretched by text content and never be centred anyway.
I don’t see that you have any real column content at present anyway as the content text spans full width of the table anyway but I guess this is a work in progress.
I may be missing the point of what you want though and getting the wrong end of the stick
That is rather a lot of code for such a simple effect and could be done in a few lines of neat css and no tables. The problem is exacerbated by all the presentational attributes and old school mark up which make it hard to debug.
I’d have said welcome to Sitepoint Kevin, but then I saw that you already registered almost a year ago.
I can’t test the difference between Firefox and Chrome here as I don’t have chrome installed, though it doesn’t look very well on Firefox either - but maybe that is because we’re still in development - also you should rename the images/banner file, it’s blocked by default by AdBlock.
I’m also wondering whether Joomla still holds on to a table layout. It used to be a pain getting rid of all those tables and you never really could with Joomla’s template system only by hacking its core, I thought they changed that with Joomla 1.5?
Sorry, I can’t help you with your problem, but table-based layouts are a pain.
Also, you might want to notify a mod to move this topic to a more appropriate subforum (web design, html, or CSS - not sure where it fits best, but this one, General Development Issues, isn’t quite right). To do this, click on the little orange flag on the left and just write a message there.