Floating div, semi-dynamic size?

[johnl]

Hi, I’m a css noob, as you’ll see in a minute :). The stylized scenario is as follows: I have a floating div (float right, width 100px) inside another div (max-width 500px). Now, when I reduce the width of my browser window, the floating div moves more and more to the left, and at some point it goes outside the containing div. While that’s what I expect given its fixed width, I’d like this to be different: I want the floating diff to be of width 100px, UNLESS it no longer fits in the containing div. It shall never leave the outer div, even if this can only be achieved at the expense of its width.

How would I do that?

Thank you in advance,
john

[sadunaresh]

Your text to link here…

edit the above code pen and explain what is needed..

[johnl]

Hi sadunaresh, thanks for the quick reply. Well, that’s what I have now. The problem is that when the actual width of outer is smaller than the width specified for inner, then inner moves out of outer. I’ve added some borders and adjusted the width so you can see what I mean in the Codepen example. Just resize the browser window.

What do I want? I want the width of inner be 300px if and only if the width of outer is > 300px. Otherwise, the width of inner should adjust accordingly.

[johnl]

Uhm, it’s here, apparently: http://codepen.io/anon/pen/rpEbA … sorry, never used that site before.

[sadunaresh]

well.. what i understood is you need inner div’s width to be responsive with respect to outer div…. correct?

case 1: if you want the inner div’s width to be responsive continuously when you resize the browser….

specify your inner div’s width in percentage… as shown below

case 1

case 2: if you want the inner div’s width responsive only after when outer div’s width equals inner div’s width.. then you may have to go with media queries… as below

case2

if this is not the way you need it… then i think we will have to go for JS

[Author]

Posts