|
| |
|
|
Starhugger
Posts: 661
Joined: 4/12/2005
From: Canada
Status: offline
 |
Div inner margin - 2/25/2007 17:34:28
This might have a simple answer but I can't seem to find it today.
Is there a way to declare a Div's size, and then declare the inner padding or margin area - without having to resize the Div?
For example, say I have a Div area that I want to be a total of 230px wide by 400px high. Now say I want to have a 15px gap between the outer edge of the Div and the content of the Div; therefore the Div content winds up being 200x370.
Is there any way I can just declare 230x400 as the Div size and then tinker with the margin size, but without having to recalculate the size of the Div area each time I change the margin?
When I'm designing a page, I think in terms of "I want this Div to take up this amount of space on the screen" and then I'll figure out how much of a gap I want between the text and the edge. So adding the margin space to the outside of the declared Div area seems backwards to me.
I'm hoping there's a better way to do this. (Please say yes!)
Starhugger
|
|
|
|
jurgen
Posts: 446
Joined: 1/9/2007
From: Castle Rock, Colorado
Status: offline
|
RE: Div inner margin - 2/25/2007 19:11:39
Keep the div size and just add padding. The padding is the space between the edges and the content within the div.
But be carefull, padding and margin can be different with IE and the rest of the crowed.....
| |
|
|
|
jurgen
Posts: 446
Joined: 1/9/2007
From: Castle Rock, Colorado
Status: offline
|
RE: Div inner margin - 2/26/2007 8:53:41
Try this code, that should work...
div#homecontainer {
width: 760px;
vertical-align: top;
padding-top: 15px;
padding-left: 15px;
padding-right: 15px;
padding-bottom: 15px;
background-color: lightblue;
}
div#welcome {
clear: both;
width: 100%; height: 100px;
background-color: grey;
border: solid black 2px;
}
| |
|
|
|
c1sissy
Posts: 5094
Joined: 7/20/2002
From: NJ
Status: offline
|
RE: Div inner margin - 2/27/2007 7:30:07
One thing you also need to remember is when you add a padding to the sections it will increase the size of the area you are ading it to.
Sometimes using a margin will work better.
Also, some browsers will have defaults on how they display margin, border and padding. A global style is always a must to have within your stylesheet at the top Just like this:
* {
margin: 0px;
padding: 0px;
border: 0px;
}
Then as you go down into your areas of the page you wish to add these things, you just add them, and don't have to worry about typing them in each area as a zero.
Good luck!
ps, hey pink jurgen, how you doin'!?
_____________________________
Deb-aka-c4Ksissy
high panjandurum and alpha female of the silverback tribe
As decreed by Jesper 5-24-2003.
The only stupid question is... the one that is never asked!!
http://cssinfo.debsplace.org
http://positioniseverything.net/
http://www.tanfa.co.uk/
| |
|
 New Messages |
 No New Messages |
 Hot Topic w/ New Messages |
 Hot Topic w/o New Messages |
 Locked w/ New Messages |
 Locked w/o New Messages |
|
Post New Thread
Reply to Message
Post New Poll
Submit Vote
Delete My Own Post
Delete My Own Thread
Rate Posts
|
|
|
Printable Version 
