CODEWITHSUNDEEP
htmlcss
greco.roamin
greco.roamin

Reputation: 807

how to make two divs, float side by side, resize responsively over a range, and the second drops down as needed

I have two divs side by side. The first is fixed width with an image. The second is variable width with text (variable over a range 150-770). I need the second div to resize on browser resize so that it can shrink from 750 to 150, the text inside will wrap during resize, and the divs stay side by side down to 300+150. However, when the browser goes below 300+150 in width, the second div will drop down under the first. After hours of chasing my own tail with css, I can achieve some of that, but not all of it at once (e.g. I can do all of that but not get the second div to drop down or I can get it all except the text won't word wrap between size 150 and 750). Thanks.

<div>
    <div style="float:left; width: 300px; ">
        <img src="image.jpg" style="width: 100%;">
    </div>

    <div style="float:left; min-width:150px; max-width: 750px;">
        some text here that should wrap on resize between 300 and 750.
        if the browser window get below 300+150, this div will
        drop below the previous div.
    </div>

    <div style="clear: both;"></div>
</div>

Upvotes: 2

Views: 2944

Answers (2)

th0ward
th0ward

Reputation: 285

You should use @media css queries to make it responsive.

This link: http://css-tricks.com/logic-in-media-queries/ may help to explain @media queries.

What you want to do is make each 100% width at mobile size.

Upvotes: 0

redtiemcfly
redtiemcfly

Reputation: 13

If you resize the page the div will resize with it and on load of the page.

$(window).on('load resize', function(){
    $('#div').width($(this).width());
});

and to make them float next to each other try this css:

display: inline;
  postion: relative;
  float: left;

Upvotes: 1

Related Questions