Fluid layout - but central column/div won't scale properly :(

[wilsonf1]

I'm using some CSS that sets my layout to be 1280px wide if the browser can go that big, but should scale down nicely if the browser is 1024px wide.I have implemented this min-width, max-wdth css on the containers, and therefore my top navigation and footer divs are expanding as expectedHowever, my central div #main-inner will not adjust to what's happening around it. I can't get it to scale at all no matter what css I apply to it.I've reverted back to my original CSS as I couldn't get anything working - however the fluid header and footer are still there and do work.Does any one fancy firebugging this for me and see what the problem is? HUGE Thank you if you can crack it!!!http://www.enterf1.com/tripGP/test.html

[cousineaug]

I've reverted back to my original CSS as I couldn't get anything working - however the fluid header and footer are still there and do work.Does any one fancy firebugging this for me and see what the problem is? HUGE Thank you if you can crack it!!!http://www.enterf1.com/tripGP/test.html

but we'd have to see the code that is NOT working to offer some advice.It seems u have a 3 column layout. Set outer containers for each and assign a % width to each. you can try something like 30-40-30 and see how that works out. You can run into problems if fixed elements like the input boxes or the image gallery do not appreciate shrinking containers.Guy

[cousineaug]

I had a closer look and this is what I seeMAIN is the centre and right and it is 720px floated rightwithin that you have main inner floated left at 490and right columns falling beside it at 220 this leaves you 10 px unused which creates (i think) a margin on the right of everythingThen you add left-columns which should FALL beside MAINit has a width of 220so when the browser is 940 or so it has no room and falls to the bottom.that seems like a lot of containersyou should be able to float everything leftand deliver content one column at a time form left to right with fewer containers......unless there is a reason for the double container. and if you use percent width you should be able to maintain your 3 columns regardless of browser width.

[wilsonf1]

I had a closer look and this is what I seeMAIN is the centre and right and it is 720px floated rightwithin that you have main inner floated left at 490and right columns falling beside it at 220 this leaves you 10 px unused which creates (i think) a margin on the right of everythingThen you add left-columns which should FALL beside MAINit has a width of 220so when the browser is 940 or so it has no room and falls to the bottom.that seems like a lot of containersyou should be able to float everything leftand deliver content one column at a time form left to right with fewer containers......unless there is a reason for the double container. and if you use percent width you should be able to maintain your 3 columns regardless of browser width.

Hey! thanks for lookingthe reason is SEO. You often find developers wanting the main content in the page read by any left navigations or side bars. That's the reason for the extra containers.Is there any work around to get what I have working fluid??

[wilsonf1]

I had a closer look and this is what I seeMAIN is the centre and right and it is 720px floated rightwithin that you have main inner floated left at 490and right columns falling beside it at 220 this leaves you 10 px unused which creates (i think) a margin on the right of everythingThen you add left-columns which should FALL beside MAINit has a width of 220so when the browser is 940 or so it has no room and falls to the bottom.that seems like a lot of containersyou should be able to float everything leftand deliver content one column at a time form left to right with fewer containers......unless there is a reason for the double container. and if you use percent width you should be able to maintain your 3 columns regardless of browser width.

OK I've uploaded a simplified version to look at:- the html is the same (as this is a SEO requirement)- but with the css, I have removed the 960.css file which was kinda having a big impact on things- i have set the max-width and min-width on 2 containers which work really well: #content-wrapper and #header-wrap- i have set widths on the left column, and right column, as these should always be fixed- then left widths off all remaining divs - in the hope they would react to the save around them.the main-inner div just goes massive!http://www.enterf1.com/tripGP/test.htmlHopefully it's a little easier to debug for you, but I am such a loss

[dsonesuk]

leaving the width of the other containers will result in these block container extentding to the full width available to them, within their parent container.to make this truly fluid, you would have to calculate percentage with of the parent containers and their children containers, and also add min-width, to prevent these elements jumping down below sibling elements, because they are to wide to fit at their current location.this is what i have come up with, But! note, it is only tested in FF.

#main {float:right;min-width:760px;width:79%;}#main-inner {float:left;width:71%;min-width:520px;}#right-columns {float:right;min-width:220px;width:26%;}#left-columns {float:left;min-width:200px;width:20%;}#footer-wrapper {clear:both;margin:0 auto;max-width:1230px;min-width:960px;text-align:left;}#footer-content .grid_8 {width:50%; float:left;}

Because the right container is within the main container, the percentage will be different from the left, as the left is percentage for #content-wrapper width, right is percentage of #main.

[wilsonf1]

leaving the width of the other containers will result in these block container extentding to the full width available to them, within their parent container.to make this truly fluid, you would have to calculate percentage with of the parent containers and their children containers, and also add min-width, to prevent these elements jumping down below sibling elements, because they are to wide to fit at their current location.this is what i have come up with, But! note, it is only tested in FF.

#main {float:right;min-width:760px;width:79%;}#main-inner {float:left;width:71%;min-width:520px;}#right-columns {float:right;min-width:220px;width:26%;}#left-columns {float:left;min-width:200px;width:20%;}#footer-wrapper {clear:both;margin:0 auto;max-width:1230px;min-width:960px;text-align:left;}#footer-content .grid_8 {width:50%; float:left;}

Because the right container is within the main container, the percentage will be different from the left, as the left is percentage for #content-wrapper width, right is percentage of #main.

thoroughly appreciate that mate! It's working much better now. The only question is, is it possible to keep the left column and right column fixed width at 220px and 200px? So only the main-inner got bigger in the browser if its wide enough?I could live with it in the way it is. But I may use the right column for images perhaps and it would be good to know I'm using the space consistently on all browsers. It's mainly just about the written content getting wider if it's possible that is!

[wilsonf1]

i've found a solution now! your css was a big help in getting me in the right direction! cheers