How can i increase the width of both left/right padding of website

[ataarticles]

Hello,

How can i increase the width of both left/right padding of website?

http://www.ataarticles.com

I tried the following code:

#container {
width: 100%;
background: url(i/dots.gif) 550px 0 repeat-y;
margin-bottom: 10px;
padding: 0 8px;
}


after asking about this before on this thread:
http://x10hosting.com/forums/review-my-site/122171-ataarticles-com.html

It didn't work for some odd reason.

 

[farscapeone]

It's because the width of your container div. You see, when you put left and right padding on an element it's actual width is calculated as a sum of width + padding-left + padding-right. So if you put 8px padding to left and right side of your dive and you set it's width to 100% it's actual width is 100% + 16px. That's why your whole container div is wider the it should be and you don't get the right effect. Just use inspect tools that almost every browser has and see for yourself. To make it more clear I made a screenshot in Chrome (image below). You can see that the padding is added correctly but it's the width of the div that's cosing the problem.

 

[ataarticles]

It's because the width of your container div. You see, when you put left and right padding on an element it's actual width is calculated as a sum of width + padding-left + padding-right. So if you put 8px padding to left and right side of your dive and you set it's width to 100% it's actual width is 100% + 16px. That's why your whole container div is wider the it should be and you don't get the right effect. Just use inspect tools that almost every browser has and see for yourself. To make it more clear I made a screenshot in Chrome (image below). You can see that the padding is added correctly but it's the width of the div that's cosing the problem.

View attachment 4980

Hi, thanks for your response.

I have been experimenting with the padding before and noticed that if i increase the padding, the right side increases while the left decreases.
Now i made changes after referring to your image capture:

/* Content
-----------------------------------------------------------------------------*/
#container {
width: 990%;
background: url(i/dots.gif) 550px 0 repeat-y;
margin-bottom: 10px;
padding: 0 5px;

The right side has increased slightly but the left side has not.

Is there a way to increase both left and right side padding including the text about an extra inch in width?

Or is that not possible with the current theme?

By the way, which software did you use to capture website image?

Thanks

 

[farscapeone]

Hi, thanks for your response.

I have been experimenting with the padding before and noticed that if i increase the padding, the right side increases while the left decreases.
Now i made changes after referring to your image capture:

/* Content
-----------------------------------------------------------------------------*/
#container {
width: 990%;
background: url(i/dots.gif) 550px 0 repeat-y;
margin-bottom: 10px;
padding: 0 5px;

The right side has increased slightly but the left side has not.

First of all you set the width to 990%. I guess you wanted to make it 990px not %. On the other hand I played with your width to make it work but there is a problem somewhere else because when I changed the width to compensate for the paddings I lost the three column content layout and everything went into the first column leaving others empty. I guess you'll have to change the width of each column to make it work.

Is there a way to increase both left and right side padding including the text about an extra inch in width?

Like I said before, you added the padding correctly to both sides. The problem is you have to adjust the width to compensate for that padding.

By the way, which software did you use to capture website image?

I don't quite understand your question. I used Print Screen key and pasted it in Adobe Fireworks to add padding arrows. Browser is Chrome and I used it's element inspector that highlighted the container div and it's padding.