Question

It’s been while since I have done some css design work. I have a 3 column lower section marked up in my html like:

<section id="lowerContent">
    <section id="lcLeft"></section>
    <section id="lcMiddle"></section>
    <section id="lcRight"></section>
</section>

I have my css for the sections like this:

section#lowerContent {
    width: 958px;
    border-left: 1px solid grey;
    border-right: 1px solid grey;
    height: 405px;
    overflow:hidden;
}

section#lcLeft {
    width: 216px;
    float:left;
    height: 100%;
    border-right: 1px solid grey;   
}

section#lcMiddle {
    width: 428px;
    float:left;
    height: 100%;
    border-left: 1px solid grey;
    border-right: 1px solid grey;   
    margin-left: 5px;
}

section#lcRight {
    width: 299px;
    float: right;
    height: 100%;
    border-left: 1px solid grey;
    margin-left: 5px;   
}

If you add up the sections with margins and borders it is 957px so I have 1px to spare inside the lowerContent section. My problem is in IE8 and FF. When I do ctrl + or ctrl – the last div is pushed to the second line and not holding its position. It works correctly in chrome, opera, and safari. Can anyone tell me what I’m missing?

Thanks

Answer 1

My Solution:

First I changed the markup to the following:

<section id="lowerContent">     
    <section id="lcLeft">
        <section id="lcLeftInner"></section>
    </section>     
    <section id="lcMiddle">
        <section id="lcMiddleInner"></section>
    </section>     
    <section id="lcRight">
        <section id="lcRightInner"></section>
    </section>
</section> 

The css works for all the major browsers and you can ctrl+ and ctrl – without the layout breaking.

    section#lowerContent {      
    width: 960px;      
    height: 405px;  
}    

section#lcLeft {      
    width: 218px;            
    height: 100%;       
} 

section#lcLeftInner {
    width: 216px;
    border-left: 1px solid grey;
    border-right: 1px solid grey;
}   

section#lcMiddle {     
    width: 442px;          
    height: 100%; 
}

section#lcMiddleInner {
    width: 430px;
    border-left: 1px solid grey;
    border-right: 1px solid grey;
    margin-left: 5px;
    margin-right: 5px;
}

section#lcRight {      
    width: 300px;         
    height: 100%;      
}

section#lcRightInner {
    width: 298px
    border-left: 1px solid grey;
    border-right: 1px solid grey;
} 

Hope that helps someone.