Div inner margin

All Forums >> [Web Development] >> Cascading Style Sheets

Message

Starhugger -> 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 -> 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.....

Starhugger -> RE: Div inner margin (2/26/2007 2:24:36)
Thanks for replying, Jurgen. Unfortunately, putting either "padding" or "margin" on also increases the Div area size. I'm attaching a screenshot as an example, plus the code I'm using: div#homecontainer { width: 760px; vertical-align: top; background-color: lightblue; } div#welcome { clear: both; width: 760px; height: 100px; padding-top: 15px; padding-left: 15px; padding-right: 15px; padding-bottom: 15px; margin-top: 15px; margin-left: 15px; margin-right: 15px; margin-bottom: 15px; background-color: grey; border: solid black 2px; } div#welcome h1 { font-size: 135%; font-weight: bold; font-style: italic; font-family: verdana,arial,sans-serif; text-align: center; color: darkgreen; margin-top: 0; margin-bottom: 0px; background-color: pink; } <div id="homecontainer"> <div id="welcome"> <h1>Test text</h1> </div> </div> I've colour-coded the different parts so you can see what each is doing. The text has a pink background. The Div surrounding the text has a grey background and a black border. And the Div surrounding that Div has a blue background. In the screenshot that "margin" pushes the grey Div out (surrounded by the black border), and "padding" pushes it out past the border (but doesn't take the Div's background colour with it). The fact that it overhangs the right edge shows how both attributes add to the Div area. So I'm still stuck recalculating the full area by figuring the content area and then adding the padding or margin to it. I was hoping there might be a way to avoid that. It's much easier to use tables for everything. I'm trying to break myself of the habit. Guess I've been spoiled. SH

Tailslide -> 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.

jurgen -> 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 -> 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'!?

Starhugger -> RE: Div inner margin (2/28/2007 1:25:49)
Thanks Tail! I did a quick test and it seems to work. That makes sense too. Many thanks! Starhugger Note to Thomas: I can't seem to get the "notify me" to tell me when someone replies, even though I check the box each time I post a message. This is just in the last couple or few days. Just in case you're not aware of the problem. [:)]

Starhugger -> RE: Div inner margin (2/28/2007 1:30:39)
Thanks very much, Jurgen! I didn't see your post. I'll give it a try in the next couple of days. [:)] c1sissy, thank you too for your reply. I like your idea of declaring a global default for margin, padding and border. No harm in knowing what you're starting with. [;)] Thanks everyone! Starhugger

jaybee -> RE: Div inner margin (2/28/2007 5:30:42)
quote: Note to Thomas: I can't seem to get the "notify me" to tell me when someone replies, even though I check the box each time I post a message. This is just in the last couple or few days. Just in case you're not aware of the problem. :) There's a problem with the board as a whole and according to Spooky, emails in particular. Don't worry, just keep subscribing, it'll get fixed eventually.

Starhugger -> RE: Div inner margin (2/28/2007 10:46:39)
Thanks Jaybee. Glad to hear they're on top of it. [:)] SH

Page: [1]

0.078125