/

Hello, this is a question I'm really struggling to find an answer for.

It may not be necessarily jQuery, it my be a simple bit of css.

I have created jSfiddle here so you can experiment for yourself.

My circumstance is that I have a variable width container, called div#container in fiddle.

And inside this container, I have 2 columns. The column widths are determined by percentage.

Currently I have the left width at 65% and right at 35%, using additional .left & .right classes.

I would have the same problem even if I was using width: 50% on my .column class.

My problem, is that I need a 10px margin between my 2 columns. Currently my column widths add up to a total of 100%, to fill the entire white box.

If I add 10px padding-right to my left column. Then the layout breaks, and the same happens with adding margin-right.

My question is, how can I subtract 5px from each of the column widths using jQuery or javascript? Whilst still keeping the percentage for my widths?

Is this possible in some way or am I dreaming. Is it possible with javascript math? I can envisage it, but I can't think where to start, or what method is the safest and lightest.

It will be used on phone browsers, so when the orientation flips from landscape to portrait, the javascript subtraction needs to stay true whilst allowing the percentage widths to adjust.

Hope this makes sense, don't hesitate to ask me for more info.

---

UPDATE SOLUTION

See solved fiddle here just using css and an extra div... /

You can adjust the window size and gutter always stays the same, -20px off the left column. See classes .new-div and .text-padding

http://jsfiddle/motodigital/7fyvn/1/

Hello, this is a question I'm really struggling to find an answer for.

It may not be necessarily jQuery, it my be a simple bit of css.

I have created jSfiddle here so you can experiment for yourself.

My circumstance is that I have a variable width container, called div#container in fiddle.

And inside this container, I have 2 columns. The column widths are determined by percentage.

Currently I have the left width at 65% and right at 35%, using additional .left & .right classes.

I would have the same problem even if I was using width: 50% on my .column class.

My problem, is that I need a 10px margin between my 2 columns. Currently my column widths add up to a total of 100%, to fill the entire white box.

If I add 10px padding-right to my left column. Then the layout breaks, and the same happens with adding margin-right.

My question is, how can I subtract 5px from each of the column widths using jQuery or javascript? Whilst still keeping the percentage for my widths?

Is this possible in some way or am I dreaming. Is it possible with javascript math? I can envisage it, but I can't think where to start, or what method is the safest and lightest.

It will be used on phone browsers, so when the orientation flips from landscape to portrait, the javascript subtraction needs to stay true whilst allowing the percentage widths to adjust.

Hope this makes sense, don't hesitate to ask me for more info.

---

UPDATE SOLUTION

See solved fiddle here just using css and an extra div... http://jsfiddle/7fyvn/4/

You can adjust the window size and gutter always stays the same, -20px off the left column. See classes .new-div and .text-padding

• javascript
• jquery
• css
• math
• jsfiddle

Share Improve this question Follow edited Jan 19, 2012 at 2:43 Joshc asked Jan 10, 2012 at 0:12 JoshcJoshc 3,8631616 gold badges8181 silver badges125125 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 4

One possible way would be to add:

$(document).ready(function () { /* standard jQuery document ready */
    $("div.white-box").each(function(){ /* not optimal, but allowing for each white box to be a different width on the page */
        var width = $(this).width(), /* get the width of the white-box */
            left = $(this).find("div.left"), /* find the left column */
            right = $(this).find("div.right"); /* find the right column */
        left.width((width - 10) * 0.65).css('padding-right','10px'); /* set the left column to 65% of total minus 10 pixels and then pad those pixels back on to provide spacing */
        right.width((width - 10) * 0.35); /* set the right column to 35% of what is left after taking 10 pixels away from the total */
    });
});