# Tech: Javascript and CSS question

**URL:** <https://boards.straightdope.com/t/tech-javascript-and-css-question/305641>\
**Category:** Factual Questions\
**Created:** [May 26, 2005, 6:58pm UTC](https://boards.straightdope.com/t/tech-javascript-and-css-question/305641 "2005-05-26T18:58:35Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![Improv\_Geek](https://avatars.discourse-cdn.com/v4/letter/i/b3f665/32.png) [@Improv\_Geek](https://boards.straightdope.com/u/Improv_Geek)\
**Post date:** [May 26, 2005, 6:58pm UTC](https://boards.straightdope.com/t/tech-javascript-and-css-question/305641/1 "2005-05-26T18:58:35Z")

</div>

I’ve never seen a web design code specific question here, so if it isn’t allowed - my apologies, but I don’t know why it wouldn’t be.

So here’s what I’ve got. I use margin-left and margin-right in the CSS to center content on my site, but I want to add flexibility so that users can make the content wider or slimmer. I figure it must be possible to modify the id’s margins via javascript but I can’t figure out how.

Anyone got ideas or helpful links?

---

<div class="post-metadata">

**Author:** ![ZipperJJ](https://sea3.discourse-cdn.com/straightdope/user_avatar/boards.straightdope.com/zipperjj/32/211_2.png) [@ZipperJJ](https://boards.straightdope.com/u/ZipperJJ)\
**Post date:** [May 26, 2005, 7:13pm UTC](https://boards.straightdope.com/t/tech-javascript-and-css-question/305641/2 "2005-05-26T19:13:52Z")

</div>

Yeah that’s basically what you call DHTML.

Do you want the user to be able to drag the columns to make them wider, or just click a button or link to make it happen?

I am going to do this off the top of my head so please check the syntax if it doesn’t work for you:

```auto

<script language=JavaScript>
function ChangeMargins() {

     if (document.getElementById('yourmarginid').style.marginRight = '100px') {
         document.getElementById('yourmarginid').style.marginRight = '200px';
         document.getElementById('yourmarginid').style.marginLeft = '200px';
    }else{
          document.getElementById('yourmarginid').style.marginRight = '100px';
          document.getElementById('yourmarginid').style.marginLeft = '100px';
    }
}
</script>

<a href=# onClick='ChangeMargins();'>Click here to change the margin size</a>

```

Note that in JavaScript it’s “marginRight” and “marginLeft” while in CSS it’s “margin-right” and “margin-left”.

Hopefully that helps a little.

---

<div class="post-metadata">

**Author:** ![Improv\_Geek](https://avatars.discourse-cdn.com/v4/letter/i/b3f665/32.png) [@Improv\_Geek](https://boards.straightdope.com/u/Improv_Geek)\
**Post date:** [May 26, 2005, 7:30pm UTC](https://boards.straightdope.com/t/tech-javascript-and-css-question/305641/3 "2005-05-26T19:30:43Z")

</div>

That’s exactly what I’m trying to do, I’m fiddling with it now but it looks like it works! Thanks!

---

<div class="post-metadata">

**Author:** ![Improv\_Geek](https://avatars.discourse-cdn.com/v4/letter/i/b3f665/32.png) [@Improv\_Geek](https://boards.straightdope.com/u/Improv_Geek)\
**Post date:** [May 26, 2005, 7:37pm UTC](https://boards.straightdope.com/t/tech-javascript-and-css-question/305641/4 "2005-05-26T19:37:27Z")

</div>

Worked like a charm - thanks so much!

---

<div class="post-metadata">

**Author:** ![ZipperJJ](https://sea3.discourse-cdn.com/straightdope/user_avatar/boards.straightdope.com/zipperjj/32/211_2.png) [@ZipperJJ](https://boards.straightdope.com/u/ZipperJJ)\
**Post date:** [May 26, 2005, 7:45pm UTC](https://boards.straightdope.com/t/tech-javascript-and-css-question/305641/5 "2005-05-26T19:45:38Z")

</div>

Sweet. I think after years of toiling I have finally learned enough JS/CSS/DHTML to be able to add it to my resume and not be lying 🙂