How can I prevent one div from overlapping another on resize?

Question

Here's an example: http://la.truxmap.com/truckpage?id=coolhaus

When I make the browser window narrower from the right hand side, the recent tweets div will go underneath the container div. i want to make it so that the recent tweets div can go no further left than the right hand border of the container div. Ive been trying to figure out if it can be done with css, but i cant seem to get it. is there a simple javascript solution that fits the bill?

Thanks!

Answer 1

You can either choose to work with a liquid layout or use the css property position.

Liquid layout:

You got 3 DIV's in your wrapper divand you want them to resize on a smaller browser window, you can do this with percentages that become variable widths :

css:

.wrapper {
  width:100%
}
.divleft {
  float:left;
  width:20%
}
.divmiddle {
  float:left;
  width:60%
}
.divright {
  float:left;
  width:20%
}

html:

<div class="wrapper">
   <div class="divleft">left</div>
   <div class="divmiddle">middle</div>
   <div class="divright">right</div>
</div>

As i said, the other possibility is the assigning the css property position to your different DIV's.

Try it yourself, its fairly easy:

http://www.w3schools.com/Css/pr_class_position.asp