Scrolling div so that checked radiobutton is horizontally centered to the screen

I have some HTML and jQuery code. The idea is that if a radiobutton is checked, the div #kaaviotaulukko should be scrolled to left position of the checked radiobutton. And the checked radiobutton should be horizontally centered to browser window.

The problem is that my current jQuery code does not center the checked radiobutton horizontally.

Here is the jQuery code:

$(document).ready(function(){
  $('#kaaviotaulukko input').each(function() {
    var container = $('#kaaviotaulukko'),
      scrollTo = $(this);

    if(scrollTo.is(':checked')) {
      var leftOffset = scrollTo.offset().left - container.offset().left + container.scrollLeft();

      container.animate({
        // scrollLeft: scrollTo.offset().left - container.offset().left + container.scrollLeft()
        scrollLeft: leftOffset
      }, 1000);
    }
  });
});

Code (JavaScript):

And here is my HTML code which is not the cleaned up yet, but hopefully you will get the idea.

<DIV id="kaaviopohja" style="width: 100%;">

<div id="kaaviotaulukko" style="white-space: nowrap; position: relative; text-align: center;">
<div style="display: inline-block">
<!--
--><DIV STYLE="DISPLAY:INLINE-BLOCK"><input name="nappi" type="radio" id="someID-102" /><div style="float:left;width:0">
</div><div class="krs" style="display: inline-block;width:70px">extra
</div></DIV><!--
--><DIV STYLE="DISPLAY:INLINE-BLOCK"><input name="nappi" type="radio" id="someID-101" /><div style="float:left;width:0">
</div><div class="krs" style="display: inline-block;width:350px">LQ
</div></DIV><!--
--><DIV STYLE="DISPLAY:INLINE-BLOCK"><input name="nappi" type="radio" id="someID-7" /><div style="float:left;width:0">
</div><div class="krs" style="display: inline-block;width:350px">L4
</div></DIV><!--
--><DIV STYLE="DISPLAY:INLINE-BLOCK"><input name="nappi" type="radio" id="someID-6" checked="checked" /><div style="float:left;width:0">
</div><div class="krs" style="display: inline-block;width:350px">L3
</div></DIV><!--
--><input name="nappi" type="radio" id="someID-100" /><div style="float:right;width:0">
</div><!--

--><div style="z-index:99;width:70px;position:fixed;left:0;top:100px;margin:auto;background-color:red"><br />
</div>

<div style="z-index:99;width:70px;position:fixed;right:0;top:100px;margin:auto;background-color:red"><br />
</div>
</div>
</div>

</DIV>

HTML:

 

I modified my code, but still, the checked radiobutton will not be horizontally centered. Any help?

Now I'm using this jQuery code:

$(document).ready(function(){
  $('#kaaviotaulukko input[type=radio]').change(function() {
    var container = $('#kaaviotaulukko'),
      scrollTo = $(this);

    if(scrollTo.is(':checked')) {
      var leftOffset = scrollTo.offset().left - container.offset().left + container.scrollLeft();

      container.animate({
        scrollLeft: leftOffset
      }, 1000);
    }
  });
});

Code (JavaScript):

 

It seems to me that...

container.offset().left

Code (JavaScript):

...is always 8. Why is that so?

 

Well, a few suggestions?

STOP pissing on it with jQuery, STOP using JavaScript to do CSS' job, STOP typing in tags and attributes in upper case like it's still 1995, STOP using the goddamned style="" attribute that has relatively few corner cases in which it has ANY damned business in the HTML, STOP using a DIV to do what seems to be a label's job, STOP using a DIV if you want a inline level element, STOP endlessly slopping DIV in where there seems to be ZERO legitimate reason to even have DIV...

You have a set of related fields, so semantically that goes in a FIELDSET hence the freaking name... you have text labelling those input, so those should be LABELS with FOR attributes. There's ZERO reason to be slapping classes all over the place and if I had DIV it would be for positioning and line-wrap... Aka, LEARN HOW TO WRITE A HTML FORM BEFORE YOU START THROWING SCRIPTTARDERY AT IT!

<fieldset id="kaaviopohja">
	<div>
		<input name="nappi" type="radio" id="someID-102">
		<label for="someID-102">extra</label>
	</div><div>
		<input name="nappi" type="radio" id="someID-101">
		<label for="someID-101">LQ</label>
	</div><div>
		<input name="nappi" type="radio" id="someID-7">
		<label for="someID-7">L4</label>
	</div><div>
		<input name="nappi" type="radio" id="someID-6">
		<label for="someID-6">L3</label>
	</div><div>
		<input name="nappi" type="radio" id="someID-100">
		<label for="someID-100">WHAT IS THIS?!?</label>
	</div>
</fieldset>

Code (markup):

I'm guessing slightly since I STILL cannot figure out what in blazes you're actually trying to do with this, but it's a decent guess, VERY unlikely you need more code than that.... and NO, you don't need the mental midgetry that is jQuery to effect the behavior of a radio button being selected, at least not in any browser newer than IE9. We now have the :target attribute for that.

Which is why if you have some other DIV rubbish or want to change the positioning of the INPUT, you'd be using :checked and MAYBE implementing generated content. No pissing on the markup with style="" asshattery, endless pointless DIV and classes for nothing, or throwing the fat bloated train wreck of developer ineptitude that is jQuery at it.

Most likely for what you're asking for -- though this depends on the placement of the label:

#kaaviopohja input {
  display:block;
  margin:0;
  transition:margin 0.3s;
}
#kaaviopohja input:checked {
  margin:0 auto;
}

Code (markup):

If I could see it live I could probably write a working example in a fraction the code you're throwing at this mess.