Three column layout - 3rd column problem

[gary00ie]

Hi,

 

I have a 3 column layout.  It works fine in IE8 but on every other browser it fails, it spills into the center div (screenshot attached).

 

Anybody have any idea why this might be happening?

 

CSS code:

 

 

/* All the content boxes belong to the content class. */
.content {
        position:relative; /* Position is declared "relative" to gain control of stacking order (z-index). */
        width:auto;
        /*width:580px;*/
        width:680px;
        /*min-width:120px;*/
        min-width:640px;
        margin:0px 210px 20px 170px;
        /*margin: 0 210px 210px 170px;*/
        /*border:1px solid black;*/
        border:1px dashed black;
        background-color:white;
        padding:10px;
        z-index:auto;
        /* left:60px;*/
        left:80px;
; /* This allows the content to overlap the right menu in narrow windows in good browsers. */
        }

#navAlpha {
        position:absolute;
        /*width:150px;*/
        /**width:190px;**/
        width:205px;
        top:20px;
        left:20px;
           border:1px dashed black;
        background-color:#eee;
        padding:12px;
        z-index:1;

/* IE hack */
        voice-family: "\"}\"";
        voice-family:inherit;
        /*width:128px;*/
        /**width:198px;**/
        width:215px;
        }
body>#navAlpha  {width:215px; }
#navBeta {
        position:absolute;
        /*width:190px;*/
        /**width:200px;**/
        width:225px;
        top:20px;
        right:20px;
        border:1px dashed black;
        background-color:#eee;
        padding:10px;
        z-index:1;
/* Again, the ugly brilliant hack. */
        voice-family: "\"}\"";
        voice-family:inherit;
        width:168px;
        }
/* Opera 5 hack */
body>#navBeta {width:225px;}

 

Thank you

 

[attachment deleted by admin]

[cssfreakie]

To be honest, stop using css hacks, they are not needed, and if you need to adjust for other browsers, use conditional comments.

Besides that, i recommend you design for firefox, and adjust if needed for any other browser. (also check out the sticky)

 

Furthermore the design you made can be easily done without the use of positioning absolute or relative.

I recommend to read about the properties float and clear. Ones you created something with that i am happy to help, but fixing this takes more time, and the code is already 'infected' with bad habits, so i don't see any usefulness in that. If your looking for a good on floats check out: http://css.maxdesign.com.au/floatutorial/ 

 

Hope this helps.

[gary00ie]

To be honest, stop using css hacks, they are not needed, and if you need to adjust for other browsers, use conditional comments.

Besides that, i recommend you design for firefox, and adjust if needed for any other browser. (also check out the sticky)

 

Furthermore the design you made can be easily done without the use of positioning absolute or relative.

I recommend to read about the properties float and clear. Ones you created something with that i am happy to help, but fixing this takes more time, and the code is already 'infected' with bad habits, so i don't see any usefulness in that. If your looking for a good on floats check out: http://css.maxdesign.com.au/floatutorial/ 

 

Hope this helps.

 

THanks a million for the suggestions and the link.  I looked through the tutorial and it fixed all the issues I was having. 

 

Thanks again

[mike12255]

dont forget to mark the topic as solved and yeah this guy is really a CSS guru hes helped me lots.