Question

I have a header banner with two div and set the min-width as 770px so as not to allow the second div to go to second line when browser resizes.

<div style="min-width:700px;">
  <div style="float:left;">Content1</div>
  <div style="float:right;">Content2</div>
</div>

I have also set a margin with margin:30px 10% 0 10%; to make spaces.

But my problem is when the browser resizes elements come near and the margin at the left side is still 10% and the margin is not reducing.It reduces until browser comes to 770px but after that element does not move.If i reduce the min-width the second div goes to second line.

How to implement this feature.Plz help me.Jquery,Javascript anything?

Answer 1

Consider using Twitter-Bootstrap, their FluidGridSystem works pretty well for dynamic resizing of pages.