|
| |
|
|
Starhugger
Posts: 494
Joined: 4/12/2005
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: 385
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.....
| |
|
|
|
Tailslide
Posts: 5915
Joined: 5/10/2005
From: Out here on the raggedy edge
Status: offline
|
RE: Div inner margin - 2/26/2007 2:44:43
Don't declare a width on the inner div - that way it can't expand to larger than the outer one.
If you give the inner div a width and a margin that make it larger than the outer one you'll get into trouble as it's now wider than the div containing it.
Either give the inner div a margin to hold it away from the outer div or give the outer div padding to do the same thing. Don't do both though.
And also ensure that you're using a full DOCTYPE so you don't have to cope with IE's different interpretation of the box model in quirks mode.
_____________________________
"My strategy is so simple an idiot could have devised it"
Little Blue Plane Web Design | Blood, Sweat & Rust - A Land Rover restoration project
| |
|
|
|
jurgen
Posts: 385
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: 5079
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://directory.css-styling.com
http://fmsforum.com
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 
