Solved

Padding Acting Like Margin

Posted on 2011-09-13
6
1,015 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
3 Use Cases for Connected Systems

Our Dev teams are like yours. They’re continually cranking out code for new features/bugs fixes, testing, deploying, testing some more, responding to production monitoring events and more. It’s complex. So, we thought you’d like to see what’s working for us.

 
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

ScreenConnect 6.0 Free Trial

Want empowering updates? You're in the right place! Discover new features in ScreenConnect 6.0, based on partner feedback, to keep you business operating smoothly and optimally (the way it should be). Explore all of the extras and enhancements for yourself!

Question has a verified solution.

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

Browsers only know CSS so your awesome SASS code needs to be translated into normal CSS. Here I'll try to explain what you should aim for in order to take full advantage of SASS.
This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
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).

821 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