I am trying to create a column that will always have remaining width. However I want it consist of 3 divs as the middle div will always fill the width available where as the left and right divs will be a fixed width. The problem I have is that the middle div which has remaining width knocks the other divs onto a new line. How can I prevent this?
Appear on Left, this would be fixed width
Always be remainging width
Appear Right, this would be fixed width
something the left div will have no controls in it.
many thanks in adavance
I'm working on my mobile, so apologies in advance for the lack of formatting / example code.
In principle it's pretty simple, once you know how:
1. Create a div as a container.
2. Into the above place three divs left,right and middle in that order
3. Using CSS float the left div left and the right div. ALSO set the widths
4. Using CSS set the left margin and right margin of the middle div so
it doesn't run round the divs on the edge.
You might also need to Google cleafix if you want to support other browsers.
A round up of the above can be seen here:
Left column content.
Right column content.
Main column content.
/* If the main column is preceded by a left column, add a left margin: */
.left-column ~ .main-column
/* If the main column is preceded by a right column, add a right margin: */
.right-column ~ .main-column
/* Clear the column floats: */
"These people looked deep within my soul and assigned me a number based on the order in which I joined." - Homer