Question

I've got a snippet of code working fairly well thus far, but there's a small glitch that needs to be worked out.

The goal is to have two items next to each other where one is a fixed width and the other fills the remaining available width within a given container.

The fluid item is resizing appropriately, however there's a little hiccup every so often as the browser/container is resized.

See: http://jsfiddle.net/tedgrafx/kTeCC/

The two items are floating, but as you resize the width, at certain widths they don't float, and appear vertically stacked - pushing one below the other.

What can be done to remedy this little glitch so it appears seamless during resizing?

Any/all help would be appreciated.

HTML:

<div class="panel">
    <div class="left">Left</div>
    <div class="right">Right</div>
</div>

CSS:

html, body{
    margin:0;
    padding:0;
}
.panel {
    float:left;
    width:100%;
    margin:0;
    padding:0;
}
.left {
    float:left;
    width:50px;
    height:10px;
    margin:0;
    background:red;
}
.right {
    float:right;
    width:100%;
    height:10px;
    margin:0;
    background:blue;
}

Javascript:

// Resize Top-Right Panel section on the Entity Panels.
$(document).ready(function () {
    resizeRight();
    $(window).resize(function () {
        resizeRight();
    });
});
function resizeRight() {
    // Subtract the width of the TopLeft section from the width of the entityPanel div:
    var right_width = $('.panel').width() - ($('.left').width());
    // Set the width of the TopRight to an even number:
    if (right_width % 2 == 0) { // Using the modulus operator to determine if 'mid_width' even number.
        right_width = right_width + 1; // Now we set 'mid_width' to an odd number.
        // Set the width of the TopRight section:
        $('.right').css({ 'width': right_width });
    }
}

No correct solution

OTHER TIPS

You don't need the javascript really, you can lose the float on #right. Unless I misunderstood what you wanted.

http://jsfiddle.net/kTeCC/7/

html, body{
    margin:0;
    padding:0;
}
#main {
    width:100%;
    margin:0;
    padding:0;
}
#left {
    float:left;
    width:30px;
    height:20px;
    margin:0;
    background:red;
}
#right {
    height:30px;
    margin:0;
    padding-left: 5px;
    background:blue;
}
br { 
    clear: both;
}

http://jsfiddle.net/kTeCC/16/

simple solution that only use position,top, left, right

html, body{
    margin:0;
    padding:0;
}
#main {
    position:relative;

    width:100%;
    margin:0;
    padding:0;
}
#left {
    position: absolute;
    left:0;
    top:0;

    width:30px;
    height:30px;
    margin:0;
    background:red;
    color:#fff;
}
#right {
    position:absolute;
    left:30px;
    right:0;
    top:0;

    height:30px;
    margin:0;
    background:blue;
    color:#fff;

}

Just as an addendum to what OneOfOne suggested; to have #left and #right not overlap (while not floating #right) you can add padding-left to #main and position #left with a negative margin-left: http://jsfiddle.net/rasmusfl0e/33pVN/

html, body{
    margin:0;
    padding:0;
}
#main {
    padding-left: 30px;
    background-color: pink;
}
#main:after {
    clear: both;
    content: " ";
    display: table;
}
#left {
    float: left;
    margin-left: -30px;
    width: 30px;
    background: red;
}
#right {
    background: blue;
}

And BTW - floating blocks will stack on top of eachother if their combined width is bigger than their container; the modulus thing you're doing to get even pixel widths on #right is your culprit.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top