Hiya,

Another issue I have come across is as follows:-

I have split a container into 2 half's, the right hand half will stay static throughout the site while the left side will have different material in it. I want both containers to have a border of 1px with a curve of 15px.
Ok so far so good, the problem comes when the material in the left column isn't as great as the right so the borders around each container is out of alignment.
So my question is, how do I fix it so both containers borders stay the same??


Kind Regards


Paul

That is a fight that has been going on for many, many years...

What you have to do here is apply a min-hight to both containers. You will have to play around to get the correct height at each breakpoint, but it should always be a little more then the largest container (in height) that you have.

Well there are a couple of things you can do... although I'm not sure what it is you are trying to achieve exactly.

Hard to say without seeing, but I would imagine all you need to do is make the element a block position, use auto to center it, and then it should float around however large or small your container gets, remaining in the center of it. Just a starting point.

I also see I was beat to the punch on this one. I was thinking of perhaps a minimum dimension as well, but then it will just be herding cats with the rest of it. Kinda like always. lol

Later!

Hey guys thanks for the reply's, however I think, as Adam said, the has been going on for many year's and look's like continuing to do so.
We have not quiet got to the bottom of this problem and I think the only solution at the moment would be to make the ROW a border and ditch the 2 column idea.
I really do appreciate your input and maybe someday the problem will be solved :-)

One thing I have done for this that RSD excels at is using three rows to 'block in' my content... Although it does make things a little odd at first, it also makes break points a little more interesting...

So basically:
row1, col1 - rounded borders on top only with background of whatever choice.
row1, col2 - empty space accordingly. Usually just 1 or 2.
row1, col3 - same rounded borders on top only, etc. basically building the top of your 'box'

row2, col1 - content that goes in your box, matching background/shdows/etc. to row1, col1, just no border top/bottom
row2, col2 - empty space again - however much space you need
row2, col3 - content + matching backgrounds - no curved borders

row3 - repeat the process of row one, just curve the bottom only of your borders.

Example here: http://sfj.jmchaffie.com/login.html

I threw this together with the center portions transparent so you can see what I mean...

So basically build the content in the above fashion. Expand your left side 'row2' height to match the right side height. From there. From that point forward, it will automatically expand in height as either side goes higher than that initial minimum height. (EDIT: You can see this by shrinking the window width. I did not make any breakpoints to move them one on-top the other. It will just keep squeezing.)

Hopefully that will at least give you some ideas to work with. Sorry if my explanation is a bit abstract, I hope the web page will help.

Take care!
- John