I did a search for this but couldn’t find anything.
Is there a way to stop side by side divs which both contain an image and are themselves in a container div from wrapping underneath each other when the browser width is changed, i/e narrowed? The right hand div is slipping under the left hand div.
I’ve done a ton of searching for a fix, I’d appreciate a hand with this.
Hi Tommy, thanks for responding. This seems so simple but it’s driving me nuts. I’ve just been looking at the min-width bit in your book (great book!) but it’s still not fixing the problem and that’s not even taking into account that IE6 doesn’t support min-width?
The problem is the header. (http://www.vb.turnstone-media.co.uk/ - my first Joomla site so I inherited a lot of the CSS, also my first foray in a long time into fluid width, I normally build fixed width sites, now I remember why).
I have a header div which contains leftHeader and rightHeader divs, both of which have fixed widths set - 537px & 368px and floated left and right respectively. So all I need to do is set the min-width of the header div to 905px and it won’t collapse any more than that right?
Thing is that is it is still collapsing. I’m stuck. Am I missing something obvious?
If you want the right side of your header ( with icons) stay in place when you resize the window you can position that element absolute and give margin-left:500px ( play with it to get the right number).
The header should be position:relative.
Give it a try.
Hope that will work for you.
Thanks for the suggestion, I did have a play with positioning but if it’s fixed in place by ‘left:600px;’ for example, then it doesn’t collapse with the browser and that makes the fluid design a bit pointless.
I want it to collapse but only till it meets the left hand edge of the lleftHeader div and then stop there, not slip under it.
Setting it to anything above 905px should prevent wrapping. (You might need to add 6px to that to account for IE’s 3-pixel jog bug.)
IE6 doesn’t support min-width, but you can set width:912px instead (just for IE).
Take JJMcClure advice about this issue. I was looking into this as well, and a simple relative position placement is the best fix. In fact I would say it is not a fix, but the way you are supposed to do it.