Jump to content

Padding Moves Box Out Of Allowed Box


Recommended Posts

accordingly these 3 CSS classes have a relation.

.contentholder {	position: relative;	width: 732px;}.content {	background-image:url(images/contentback.png);	background-repeat:repeat-y;	height:100%;	width: 732px;	padding: 0px 0px 0px 50px;}.menu {	position: relative;	left: -1px;	width: 738px;}

in this example below is demonstrated how the div's with their class assignment are placed.

	  <div class="contentholder">		 <div class="menu"> fill up </div>		   <div class="content">		   fill up		 </div>	  </div>

My problem is content box that moves outside the contentholder box, when I add padding.however only a certain margin, to be exact the 6 pixels that are added in the menu class.Isn't the content box not supposed to go outside the holder box without a direct scale assignment?I know this might sound a bit confusing and I let dreamweaver even loose on this, but he seems to demonstrate the result I was hoping for (the content box staying inside the holder box) but my server seems to allow it.

Edited by Hemlock
Link to comment
Share on other sites

A box can be larger than the box that holds it. There is nothing unusual about that, and it has nothing to do with Dreamweaver or your server. This is simply the way a browser will react to the instructions you give it.Remember that padding gets added to the base width that you define in CSS. So adding a left padding of 50px to a div that is 732px wide results in a div whose true width is 782px. If that is not what you want, then subtract 50px from the width definition.Borders and margins also get added to the base width in this way.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Create New...