Solved

Padding Acting Like Margin

Posted on 2011-09-13
6
1,026 Views
Last Modified: 2012-05-12
I am having problems with using padding. When I apply it to my #content-right and #right its shifting everything like its a margin. Any ideas as to what is going on. I am using Joomla! 1.7 as a content management system.

http://www.cybernetiksolutions.com/cybernetiksolutions.com/
0
Comment
Question by:thebradnetwork
  • 3
  • 3
6 Comments
 
LVL 83

Accepted Solution

by:
Dave Baldwin earned 500 total points
ID: 36533451
That's what it does.  Here's the 'official' description: http://www.w3.org/TR/CSS2/box.html   When you specify a 'width', it is the width of the 'content' the innermost part of the HTML box model.  Padding, border, and margin are added to the outside.  The difference between padding and margin is that padding is inside the border and has the background color of the content.  Margin is outside the border and is transparent.
0
 
LVL 6

Author Comment

by:thebradnetwork
ID: 36533849
Let me try and explain this in more detail. I have specified a width of 65% or 650px for #content-right. When I add a padding:15px; its also like its adding 30px to the left and right equaling out to 680px. When I add the padding of 15px instead of taking the content and pushing the border in its expanding it. I hope that makes more since as to what problem I am having.
0
 
LVL 83

Expert Comment

by:Dave Baldwin
ID: 36534061
Apparently you didn't look at the link that I posted.  What you are describing is correct behavior.  Padding pushes the border Out because padding is Inside the border.  Nothing reduces the size of the content area, padding, borders, and margins are Added to the outside content.
0
Free Tool: IP Lookup

Get more info about an IP address or domain name, such as organization, abuse contacts and geolocation.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

 
LVL 6

Author Comment

by:thebradnetwork
ID: 36534093
I did read the link you send. I still do not think that I am conveying my message. I will do an illustration of what I need to happen as to what is really happening. Also I was able to figure out the problem. Sometime I guess it helps to step away for a minute and then refocus. Thanks for your help.
boxdimeg.png
0
 
LVL 6

Author Comment

by:thebradnetwork
ID: 36534095
Ignore that illustration I attached. I didnt mean to attach it.
0
 
LVL 83

Expert Comment

by:Dave Baldwin
ID: 36534272
Do you have what you need now?
0

Featured Post

Free Tool: Subnet Calculator

The subnet calculator helps you design networks by taking an IP address and network mask and returning information such as network, broadcast address, and host range.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

CSS is a visual language used to classify objects and define rules about how they should be displayed. CSS skills aren’t restricted to developers anymore, there is a big benefit to having a basic understanding of the language, regardless of your occ…
The article shows the basic steps of integrating an HTML theme template into an ASP.NET MVC project
In this tutorial viewers will learn how to style different bullet points for unordered lists in CSS. Begin with a normal unordered list; the default bullet point is a solid circle: In the CSS, create a defined class of unordered list by typing "ul.S…
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).

827 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question