CODEWITHSUNDEEP
htmlcssresponsive-design
Guybrush Threepwood
Guybrush Threepwood

Reputation: 3493

How can I position two divs on the same line and have them act responsive?

I found how to position two divs on the same line on one screen size, but I can't make it responsive. The right image just goes below the left div. Here is my CSS and HTML

<div id="my-wrapper" style="
    max-width: 941px;
    width: auto;
    height: auto;">
  <div class="left-stuff" style="
    float: left;
    max-width: 100px;
    width:  auto;
    height: auto;">
        <img alt="" src="blah1.png" 
            style="width: auto; height: auto; max-width:100px;">
        <img alt="" src="blah2.png" 
            style="width: auto; height: auto; max-width: 100px;">
       <img alt="" src="blah3.png" 
            style="width: auto; height: auto; max-width: 100px;">
    </div>
    <div class="right-stuff" style="float:right;">
    <img src="banner.png" style="width: auto; height: auto; max-width:100%;">
    </div></div>

An example can be found Here: http://jsfiddle.net/TachionFiddle/c9EYe/4/

Upvotes: 1

Views: 1566

Answers (2)

Jonathan Crowe
Jonathan Crowe

Reputation: 5803

Firstly please look into moving your styles into CSS stylesheets.

here is a quick stab at your problem - please note this will not work properly in IE versions 8 and below:

<div id="my-wrapper" style="
max-width: 941px;
width: auto;
height: auto;">
<div class="left-stuff" style="
   float: left;
   max-width: 20%;
   width:  100%;
   -moz-box-sizing:border-box;
   -webkit-box-sizing:border-box;
   box-sizing:border-box;
   height: auto;">
      <img alt="" src="blah1.png" 
        style="width: auto; height: auto; max-width:100px;">
      <img alt="" src="blah2.png" 
        style="width: auto; height: auto; max-width: 100px;">
      <img alt="" src="blah3.png" 
        style="width: auto; height: auto; max-width: 100px;">
  </div>
<div class="right-stuff" style="max-width:80%;width:100%;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box;float:right;">
<img src="banner.png" style="width: auto; height: auto; max-width:100%;">
</div></div>

There are 3 changes here:

1) Specifying widths in percentages - therefore no matter how large the screen is the div will scale to match

2) box-sizing:border-box - this changes the way the browser renders the width of the div to include padding and borders. If you specify width:50% and padding:20px without border-box you end up with a div that is 50% wide + 20px of padding which of course is larger than 50%. border-box enforces that the TOTAL width of the box is 50%;

3) max-width fairly self explanatory - by setting width of the left box to 20% and the right box to 80% the combined width will always fill the space provided by the parent element

Upvotes: 0

beautifulcoder
beautifulcoder

Reputation: 11320

Floats aren't going to work as well since it rips it out of the layout.

I recommend inline-block and set width:50% on each.

You have to make sure images never bust your divs so do max-width: 95% or something less than that. Depending on how many there are.

Upvotes: 2

Related Questions