CSS Positioning Issue

Question

Good Day,

I am working on a web site where there are two box items on the main content of the page and it looks something like this:

-----------------  ----------------
|               |  |              |
|               |  |              |
|               |  |              |
|               |  |              |
-----------------  ----------------

When the browser dimensions are at 1024 x 768 and above, the site looks OK. But when I resize the browser to a smaller dimension horizontally, the right box "collides" with the left box and there is some overlap.

I have a basic understanding of CSS, but the site I'm taking over is heavily into CSS.

What I want is when I resize the browser to a smaller dimension, I want the right box to stay right where it's at and have a horizontal scroll bar appear at the bottom of the browser.

Here is a screenshot:

http://www.skoolrox.com/collision.jpg

I know I need to brush up on my CSS, but my question is, when I do my search on CSS, I want to look for keywords like:

CSS, fixed, positioning.

Since I'm no CSS guru, does this sound right or am I missing additional keywords in my search.

TIA,

coson

Answer 1

Use a fixed dimension wrapper around your elements.

Here's an example

<div id="wrapper">
  <div class="float-left">

  </div>
  <div class="float-left">

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

CSS

#wrapper {
  width: 1000px;
}
  #wrapper .float-left {
    float: left;
    width: 500px;
  }