small CSS float hiccup

[wizzpig666]

Hi

I have got 2 divs nested within a container div. First nested div floats left, the other floats right, and they move towards each other as the browser is resized smaller (exactly as I want) only problem is when the nested divs collide, my right floated div gets bumped out of the container div and sits below the left floated one. pretty sure it's a damn easy fix, but I'm still rather wet behind the ears.

Can someone please help me with a fix for this ?

 

[jnjc]

What do you want them to do ? If you want to stop the container "shrinking" below a certain width then use the min-width in your css.

HTH,
JC

 

[wizzpig666]

Duh !

What do you want them to do ? If you want to stop the container "shrinking" below a certain width then use the min-width in your css.

HTH,
JC

Thanks mate ! problem solved

 

[wizzpig666]

I spoke too soon!

sorry my mistake, I assumed that min-width setting would sort it out. Container stops at min width but nested div still drops below other nested div.
Actually the container may be irrelavent, all I want to do is have 2 divs , one is aligned to left of page, the other to the right side, and for them to move towards each other when the page is sized downwards, and stop once their margins collide. Simple to do I'm sure, but I'm still getting my head around laying out divs correctly

 

[pingeyeg]

You know, it might be easier to float one to the left and then use a margin to push the other one to the right. This way when they collide the content to the right won't move anywhere other than get squished.

 

[conor]

did you try the min-height on the container div? margin is a good idea

 

[jnjc]

sorry my mistake, I assumed that min-width setting would sort it out. Container stops at min width but nested div still drops below other nested div.
Actually the container may be irrelavent, all I want to do is have 2 divs , one is aligned to left of page, the other to the right side, and for them to move towards each other when the page is sized downwards, and stop once their margins collide. Simple to do I'm sure, but I'm still getting my head around laying out divs correctly

Sounds like you need to do two things.

1) Set the margins on your divs to 0, otherwise they will wrap even though they are not touching

2) set you min-width wider until it stops before they wrap.

If these don't work then email a URL and we will check it out.

HTH,
JC

 

[wizzpig666]

Result !!

Sounds like you need to do two things.

1) Set the margins on your divs to 0, otherwise they will wrap even though they are not touching

2) set you min-width wider until it stops before they wrap.

If these don't work then email a URL and we will check it out.

HTH,
JC

Excellent ! fixed, and behaving exactly as I want it to. Thanks a stack for the help