Techagesite Techagesite - 2 months ago 8
CSS Question

different div sizes on browser resize

I have 2 divs that are side by side that make up part of my responsive design

I have each div set at a height of 179 because there was a gap under one of the divs and a suggestion was to give them set heights.

When there isnt enough room the divs stack but then the page content gets pushed down further than id like.

Is there any way to keep the divs at the same size as each other when there is room but the right one to end up being only a certain height say 20px rather than 179px when the browser is resized and there isnt enough room for both divs and they stack?

Im hoping theres an answer other than using media queries

`


</div>
<div class="right-column1">

</div>
</div>


.container1 {
width: 100%;

}
.left-column1 {
width: 50%;
float:left;
height:179px;
}
.right-column1 {
width:50%;
float:left;
height:179px;
}`

Answer

I'm not sure it's possible with CSS alone.

I've done it in this FIDDLE - I'm not sure if it will work for you.

JS

var $startwindowwidth = $( window ).width();

$( window ).resize(function() {
  if ( $( window ).width() < ( $startwindowwidth * 0.5 ) )
  {
      $( '.right-column1').css({
          'float'  : 'none',
          'height' : '20px'
                                });
      $( '.left-column1').css({
          'float'  : 'none'
                                });
  } else {
      $( '.right-column1').css({
          'float'  : 'left',
          'height' : '179px'
                                });
      $( '.left-column1').css({
          'float'  : 'left'
                                });
   }
});

Try this http://jsfiddle.net/YAFdz/2/.

Don't give it a height, and you can center it by putting in a div.

But keep in mind that when you start putting "fixed" width info into the div, it won't be "fluid".