My problem was getting the top section (subject, from, to, date, reply to) into a table-like format without using a table. My solution was to put the left and right halves into divs (i.e. from and to in one div, and date and reply to in another), then float them left and right. Below the memo head, I put an hr that I cleared both.
This worked fine on pages like the one in the example, but now I’ve run into some pages that have a long nav menu on the left (which is also floated). In these cases, the clear on the hr pushes it down below the lowest part of the lefthand nav menu.
I tried absolute positioning the nav menu, which fixed the float/clear problem, but introduced a new problem when the left column is longer than the other two. In those cases, the menu predictable ran past its column.
The only other solution I can think of is to use the display property with things like table-cell and table-column, but I don’t know how well those are supported across browsers.
Does anyone know of a better way to do this? Preferably without having to change the HTML since we have lots of pages that already use this template.
You need to add the float to an inner element as shown in the demo. The float would then need to be 100% width. You can’t just float the right column in the structure that you have already because it would need a width and you have a fluid width.
Another solution I thought of was to apply “position: relative” to the div that contains both columns, then right: 0; top: 125px; to the right column to put it in the right place. Then get rid of all the floats and the clears. Not sure if that’s a good solution or if it’s going to cause yet another problem I haven’t thought of.
No, never use position relative like this as it is not meant for structural layout. Position:relative doesn’t actually move anything at all physically. It just moves them visually which means that the imprint of the element always remains in the page in the position that it always was.
Perhaps an easier method is to use the second solution I offered in the demo where you remove the margins from the element but use overlow:hidden instead (and haslayout for IE).
If you give me a link to the page where you are having this problem I’ll show you the code to add.
It’s still not a good idea to use absolutely placed columns because you can never clear them and a footer will overlap. Even if you expect the main column to always be longer you will find that things change over time and the layout ends up breaking.
I believe I have given you the correct solution in my last post which will save changing the html.
The first method I showed required that you add a nested div on the right side of the page which you then float at 100% width.
I was going to apply position: relative to #memohead, which is the div that contains both columns. Then I was going to use position: absolute: on the right column to get it into place.
I don’t think it matters whether something is moved physically, because if you view the page without the stylesheet, everything still makes sense and is in the right order.
I don’t have a link to the page in question because it’s on our internal development server.
Ok, I have floated the right column “float: right” but when I do that it drops below the left column. Clearing has no effect.
I think for this to work, I’d have to have the right column appear first in the HTML, no?
Another solution I thought of was to apply “position: relative” to the div that contains both columns, then right: 0; top: 125px; to the right column to put it in the right place. Then get rid of all the floats and the clears. Not sure if that’s a good solution or if it’s going to cause yet another problem I haven’t thought of.
Just float the right column and then any elements in that section that have cleared applied to them will be contained within the parent float and not afffect your nav.
This demo explains the problem and shows the solutions.
Just remember that when both columns are floated you will need to set following content such as a footer to clear:both.
