I have been playing around with my CSS for about a week now and can not figure out how or why one of my regions floats to the bottom of my template. On my http://www.thermalmatrixusa.net/ site, the right_container floats to the bottom of the template???
Have you tried clearing your floats?
I have. No luck.
Julie,
It’s a hierarchy/layout issue. When floating items, they will only follow the item in front of them in the tree. Given a layout of the following:
text
text
text
If all are set to float left, what you will end up with is a single line with all three divs. On the page it will appear as
texttexttext
When you start restricting the width of the area the items are floating in, they will start to wrap accordingly, starting with the first item, the second, and then the third. If the space is too small for the first followed the rest, the first item will stay on line one, while all others will wrap down.
texttext ```
The same thing happens next, when testing to see if item 2 and 3 are too wide. If so, then item 3 will split
``` text
text
text
If you introduce a float “right” to the last item, it will float alongside the item before it in the tree. Unfortunately, in this case, that is what is happening.
If you change the order, and make the right column the first item, then it will float to the right, which will cause the next items in the tree to shift up to the left, if given a float left.
An alternative approach, leaving the column where it is in the tree, is to give it a position: absolute, a right: 0, top:0 and set the parent region to position: relative, you can cause the last item to appear at the top right corner. The downside is, this kind of change could have a bigger affect.
Thanks so much for all of this info. I am going to move the item order and see what happens 
Julie,
I also wanted to add an additional example you can reference. If you look at the included templates list in CM1, there is one labeled cClampRight which is very close to the overall frame of your page. The header and footer are as yours is. In between is another region containing a left, large region, and a right, smaller side-bar type region.
In your page, the right side bar could be placed as the right bar is in this template. The left part of your page, with the top, left_container, and lower left_bottom_section would exist, stacked, inside the wider section on the left of the cClampRight template. They would be two regions, nested inside the left region, which is ultimately floating alongside the right column. When compared to the structure I outlined above, the piece between the head and foot would look like:
(wraps both columns)
text
text
text
Hello Daved-
I have tried for hours both of these methods. Nothing is working. Can you please look at what I have done in the UI and continue to advise. Thanks so much for your patience.
Julie
Julie,
I don’t have access to your environment. Have you worked with someone in support before that has been in a session with you, or that has access to your CM1 instance?
Have you tried just moving the right column region to the top of all the others? I was just looking at your markup and it should be pretty easy to just move the region up the stack as the first one and no other CSS changes are needed.
Julie,
If you have any trouble dragging the right column region to the top of the parent region as Daved described, another option would be to apply this code to your right_container ID in your CSS file:
position: absolute;
top: 364px;
right: 280px;
width: 292px;
} ```
Note that “position: absolute” definitions should usually be avoided whenever possible as it can make your page less flexible and possibly cause issues with different viewing resolutions, but it can be used as a workaround in your case if you continue to have trouble with the other options.
NathanielNathaniel-
That sure worked! Thanks so much!
Julie