I have a similar question. I am trying to create a 5 column fluid layout. That is pretty easy to do using percentages. The trick is that I need 4 of the columns to be a fixed dimension. And the 5th column to expand to fill the rest of the space.
I have tried using percentages with min/max-width. That worked in fixing the dimensions of the four columns, but it doesn't force the 5th column to fill all the existing space.
I am using float:left to keep everything in horizontal alignment. I am using relative positioning as of now I don't have the columns in a container div. But if I need to I can put them into a container div.
Any suggestions?
I am a CSS noob. I am a designer that is trying to learn CSS so that I can create working mock-ups.
divs (or more correctly, block level elements) take up all available width by default. Float the first four divs and let the 5th take up the remaining space. Give that 5th div a left margin equal to the first four divs.
yes, but 3, 4, and 5 will need to proceed 2 in the source order. in fact, if floating them right, you may need to order the doc like so: 1(float left;), 5, 4, 3(float:right), 2. and you should probably place the whole lot in a container with a min-width so that 2 doesn't get squished into nothingness.
are all the columns true content or are they reserved for design?
I will give your suggestion a try as soon as I get a chance! The reason that I want the columns to have fixed width is; they are for input fields (QTY, Item Number, Price, Total) in a purchase ordering forum. Once they get past a certain size the increase in size serves no purpose. The field that greater width would help is Item Description. Obviously the more width, the less height is needed, the more items on the screen etc...
That is a great suggestion about the minimum width container!
I have a Joomla Website with a CSS Template, its not fluid
I deally i would like to have the website fluid as per your article min, max browser width for 90% best viewing
What code would i need to add to the css to accomplish this ?
Cheers
Dave
That's not good, I was hoping for something simple :-(
Any like a challenge ? :-) !!!!
I have tried using percentages with min/max-width. That worked in fixing the dimensions of the four columns, but it doesn't force the 5th column to fill all the existing space.
I am using float:left to keep everything in horizontal alignment. I am using relative positioning as of now I don't have the columns in a container div. But if I need to I can put them into a container div.
Any suggestions?
I am a CSS noob. I am a designer that is trying to learn CSS so that I can create working mock-ups.
Thanks,
are all the columns true content or are they reserved for design?
Or give me some 90% pointer ;-)
That is a great suggestion about the minimum width container!
I will post my code as soon as I get the chance.
Thanks,
And my apologies again for not helping, but I won't touch Joomla...