- This topic is empty.
August 25, 2013 at 10:33 pm #148122
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,
johnAugust 25, 2013 at 10:45 pm #148123sadunareshParticipant
edit the above code pen and explain what is needed..August 25, 2013 at 11:07 pm #148124
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.August 25, 2013 at 11:22 pm #148125
Uhm, it’s here, apparently: http://codepen.io/anon/pen/rpEbA … sorry, never used that site before.August 26, 2013 at 1:51 am #148130sadunareshParticipant
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 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
if this is not the way you need it… then i think we will have to go for JS
- The forum ‘CSS’ is closed to new topics and replies.