8 Replies - 786 Views - Last Post: 29 April 2013 - 08:14 AM

#1 qim  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 30
  • Joined: 17-April 13

padding

Posted 18 April 2013 - 12:27 PM

I have a box in a sidebar with text inside. I want to bring the text away from the edge so used padding in the css box. What happens is that instead of the text moving away from the edge it is the box that moves outwards.

I'm starting to understand that changes to the box are only for the box and I must do something else with the text inside

very confusion...
div.box1 {
	border: solid 1px #CCCCCC;
	background-color: #D4D3BA;
	float:right;
	padding: 10px;
	margin: 4px 0px 28px 4px;
height:300px;
width:180px;
text-align: center;

}

div.box2 {
	border: solid 1px #CCCCCC;
	background-color: #D4D3BA;
	float:right;
	
	margin: 35px 0px 28px 4px;
height:300px;
width:180px;
text-align: left;
padding:10px;


}



Do I have to create another div? How can I make it relate to the box?

Soory if I am not using the right terminology

Thank you

Is This A Good Question/Topic? 0
  • +

Replies To: padding

#2 andrewsw  Icon User is online

  • It's just been revoked!
  • member icon

Reputation: 3817
  • View blog
  • Posts: 13,532
  • Joined: 12-December 12

Re: padding

Posted 18 April 2013 - 12:44 PM

You'll need to show some relevant HTML, and probably some css for elements around your two boxes.
Was This Post Helpful? 0
  • +
  • -

#3 qim  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 30
  • Joined: 17-April 13

Re: padding

Posted 18 April 2013 - 12:51 PM

It refers to this:

		
	</div>
<div class="sidebar2">
						
		<div class="box2">
		
<b>Navigation beyond this point needs a login at Travel Agent's page.</b><p> Public access to other resources is currently being redesigned.<p> Please, check back in a few days for the relaunching.<p>
We apologise for the temporary inconvenience. 	

	</div>
	

Was This Post Helpful? 0
  • +
  • -

#4 BetaWar  Icon User is offline

  • #include "soul.h"
  • member icon

Reputation: 1199
  • View blog
  • Posts: 7,309
  • Joined: 07-September 06

Re: padding

Posted 18 April 2013 - 01:08 PM

Padding is an odd thing in CSS, it will increase the render width and height of the object by whatever the left+right and top+bottom paddings are (respectively). So, if you want to offset that increase you will need to reduce the width and height by the left+right and top+bottom paddings respectively.

I am not sure why the browsers decided that this is how it should work (probably part of the standard somewhere), but it seems to be consistent across the board.

For example, if you want a box to be width 180px with 10px padding then you want to set the width to 180px - (10px + 10px) or 160px.

Hopefully that makes sense.
Was This Post Helpful? 0
  • +
  • -

#5 qim  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 30
  • Joined: 17-April 13

Re: padding

Posted 18 April 2013 - 01:15 PM

hi Thanks

It is not the box I am referring to. it is the text inside. I'm new to this but came to the conclusion that I mus make a separate divassociated withe box to control the text inside the box. If I include padding to the box divs the boxes move out rather than the text move in.
Was This Post Helpful? 0
  • +
  • -

#6 Hqtitan  Icon User is offline

  • D.I.C Head

Reputation: 11
  • View blog
  • Posts: 51
  • Joined: 28-August 10

Re: padding

Posted 25 April 2013 - 05:11 PM

The boxes would seem to get larger when adding padding because padding works by adding to the existing height and width. If you want to keep the boxes the same size, you will need to remove equal amounts from the height or width that you are adding using the padding. This will make the box appear to be the same size, while the text appears to move further from the edges of the box.
Was This Post Helpful? 0
  • +
  • -

#7 qim  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 30
  • Joined: 17-April 13

Re: padding

Posted 25 April 2013 - 11:00 PM

Thanks. I did that and it worked.
Was This Post Helpful? 0
  • +
  • -

#8 aaronellington  Icon User is offline

  • D.I.C Head

Reputation: 3
  • View blog
  • Posts: 50
  • Joined: 03-April 09

Re: padding

Posted 29 April 2013 - 05:03 AM

Or... simply add this to the div.box1 style:

box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;



This will do the calculations for you and automaticly subtract any padding or borders you add on. This will keep div at the width you want.

This post has been edited by aaronellington: 29 April 2013 - 05:04 AM

Was This Post Helpful? 0
  • +
  • -

#9 qim  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 30
  • Joined: 17-April 13

Re: padding

Posted 29 April 2013 - 08:14 AM

Nice! I'll remember that.

Thanks
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1