Question

I have the following page

http://www.javaexperience.com/java-externalizable-vs-serializable-interfaces/

The extreme right hand tips section is coming fine in Firefox but is going outside the viewable area in Chrome and IE. Currently the left margin value is set to 1290px. If I change it to 1150px then it gets fixed in Chrome and IE but causes issue with Firefox rendering.

Is there any fix available for this.

Answer 1

Instead of providing a large margin on <div id="tips">, append the <div id="tips"> to the parent container, that is <div id="contents-b"> and adjust the widths of the siblings accordingly.

So,

<div id="contents-b">
    <div id="content-b">
        <!-- CONTENT -->
    </div>
    <div id="sidebar">
        <!-- sidebar CONTENT -->
    </div>
    <div id="tips">
        <!-- TIPS CONTENT -->
    </div>
</div>

and the css like

#contents-b {
    width:100%;
}

#content-b {
    display: inline-block;
    width:50%;
}
#sidebar {
    display: inline-block;
    width:30%;
}
#tips {
    display: inline-block;
    width:20%;
}