ansaurus

Question

CSS Column Overlap everywhere BUT IE and Firefox 3

Answer 1

+2 A:

I took a look at the page and the problem only appears when you re-size the page.

The problem is your right div is 80% so when the screen becomes smaller and ratios change and that 80% then overlaps into your left background.

Take a look at http://www.dynamicdrive.com/style/layouts/item/css-liquid-layout-21-fixed-fluid/ to see how to set up a "static-fluid" layout.

savageguy 2009-01-12 19:54:52

Answer 2

A:

When I check the site in www.browsershots.org, it looks bad on initial display in a lot of the browsers. I've had one or three (probably Firefox) readers tell me they couldn't see the text and I suspect they were probably more sophisticated users than I am a CSS-writer. thx

2009-01-12 20:29:17

Answer 3

+1 A:

The problem is definitely ratios, as pointed out by savageguy. If what you are wanting is a fixed-width left column with a variable width right (main) column then you could use this (not tested but should work):

#col1_schedule_toc {
    width: 175px;
    float: left;
}

.column2 {
    float: right;
    width: 100%;
}

EDIT: Incidentally, I noticed that (at least on the page I looked at) you also aren't closing the left column before you open the right, so technically the right column is inside the left, which will cause issues with my suggested fix. So you also need to move the closing div for col 1 so that it's above the opening div for col 2.

EDIT 2: Plus, as pointed out by Plan B, you'll also need a clearing div beneath both elements to prevent the parent (container) div from collapsing:

div.clear {
    clear: both;
    font-size: 1px;
    line-height: 1px;
    overflow: hidden;
}

da5id 2009-01-12 20:37:10

Answer 4

+2 A:

The reason why this is happening, it seems, is because the image (floated left) isn't the height of the entire page. So, when the page isn't wide enough to accommodate both the image and the text next to each other, the text breaks to the next available whitespace.

Try floating both elements to the left, and apply a left-margin equal to the width of the "decorative" column to column2 as such:

.column1 { float: left; width: 125px; }
.column2 { float: left; margin-left: 125px; }
.clear { clear: both; }

You'll need a clearing div below both elements:

<div class="column1">...</div>
<div class="column2">...</div>
<div class="clear"></div>

Plan B 2009-01-12 20:39:33

Small typo, but great advice (that crossed mine, thus I didn't reference it). Uprated.

John Dunagan 2009-01-12 20:41:29

Thanks john! I learned from the best my friend! -Bryan A

Plan B 2009-01-12 20:43:32

Your suggested fix will definitely work, but I don't think it's the image that's the problem - it would be if the main col wasn't floated right, but it is.

da5id 2009-01-12 20:51:16

Answer 5

A:

In addition to savageguy's right-on-point advice, the image you have in the page (your picture, etc.) to the left is a fixed width. This is why, when the browser is re-sized, that 80% suddenly becomes too wide.

On column2, setting a left margin of the width of the image + the amount of separation you want (for example, 160 should work, but you can play with it), then making the width of the column2 100% (of the remaining width) should prevent your overlap.

[Edit: Plan B also offers a very robust solution.)

John Dunagan 2009-01-12 20:40:23

ansaurus

tags:

views:

answers:

CSS Column Overlap everywhere BUT IE and Firefox 3

related questions