...

View Full Version : Resolved padding



alykins
05-14-2011, 09:50 AM
Ok so I thought i had a firm grasp on margins/padding... my issue is i have some elements... they are all alined how i want them but when i had text in them i wanted to add some padding (to push the txt off the walls) but when i added the padding it screwed up all my margins... the following is code

Note that i have commented out the padding because of this and the text within the divs is arbitrary


#search_field{
background-color: #FFFFFF;
border:3px ridge #FFFFFF;
margin: 10px 5px 10px 10px;
width: 784px;
height: 576px;
float: left;
/*padding: 3px;*/
}

#right_col_top{
background-color: #FFFFFF;
border:3px ridge #FFFFFF;
margin: 10px 10px 5px 5px;
height: 280px;
width: 198px;
float: right;
overflow: scroll;
/*padding: 3px;*/
}

#right_col_bottom{
background-color: #FFFFFF;
border:3px ridge #FFFFFF;
margin: 5px 10px 10px 5px;
width: 198px;
height: 280px;
float: right;
overflow: scroll;
/*padding: 3px;*/
}

Also for dimension purposes it is within a 1024 element leaving 42 px... 10 btw each element and the wrapper (amounting to 30px) and four 3px border occurrences...

I dont see why when i add padding (to push the text off the walls) it blows my element's alignment to heck-- am i missing something?

abduraooft
05-14-2011, 10:23 AM
the following is code
That's too insufficient to understand your issue. Can we have a link to your page?

bullant
05-14-2011, 11:44 AM
Really need to see the html the css applies to.

But as a guess, I suspect the parent element of the one you apply the padding to does not have a width specified and so the amount of padding is added to the overall width of the element and so could mess up your margins.

Try specifying a width to the parent element and then when you apply padding to the child element, it will push the child element's content away from the element's boundary.

alykins
05-14-2011, 09:55 PM
code is too much to post- developing an asp.net project... also dont have it hosted, i use SQL...

for eg though these children are within a wrapper with a width of 1024 pixels. everything else is arbitrary...

they align as follows

| wrapper width 1024px |
| |
| 10px |search_field| 10px |right_col_top| 10px |
| 10px |search_field| 10px |right_col_top| 10px |
| 10px |search_field| 10px |right_col_bottom| 10px |
| 10px |search_field| 10px |right_col_bottom| 10px |
| |

and to add the css for the wrapper


#wrapper{
border: 8px ridge #FFFFFF;
font-family: 'century gothic' 'helvetica' 'arial';
background-color: #5D0404;
width: 1024px;
height: 768px;
margin: auto;
}

the other three elements have css as provided above.

teedoff
05-14-2011, 11:15 PM
Well then as a guess...the padding your adding to get some space on your text? Why arent you adding to the <p> tag in your css?

Perhaps:

#search_field p{padding: 25px;}

alykins
05-14-2011, 11:34 PM
thanx! that worked like a charm!



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum