Web Design Forums

bazzle · 17-01-2008, 12:56

I've never quite grasped how margins and padding works in css.

I'm simply trying to make a nested box (200x200) sit in the exact centre of it's containing box (300x300)

I've tried two things:

Specifying margins of 50px on each side of the small box.

Specifying 50px padding on each side of the containing box.

200+50+50=300 so both these examples should work, but they don't.

Could someone cast some light over this?

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>

<style type="text/css">

body{
color:#FFFFFF;
}

#bigredbox{
background-color:#FF0000;
height:300px;
width:300px;
}

#littlebluebox{
background-color:#0000FF;
margin:50px 50px 50px 50px;
height:200px;
width:200px;
}

#bigredbox2{
background-color:#FF0000;
padding:50px 50px 50px 50px;
height:300px;
width:300px;
}

#littlebluebox2{
background-color:#0000FF;
height:200px;
width:200px;
}

</style>
</head>

<body>

<div id="bigredbox">
<div id="littlebluebox">

margins</div>
</div>
<br />
<br />
<br />
<br />
<div id="bigredbox2">
<div id="littlebluebox2">

padding
</div>
</div>

</body>
</html>

proc355 · 17-01-2008, 13:10

1st example add a float:left; to the blue box
2nd you're not taking the addition of the padding in to account for the size - width:200px;height:200px; for the big box

dont pad

djeglin · 17-01-2008, 13:10

Padding isnt included in the "width" and "height" dimensions... So if you want a 200px square box, centered inside a 300px square box, your math is right, but your implementation is wrong. What you would actually need to do is create your #bigredbox with a height and width of 200px, and a padding of 50px, and then your "#littlebluebox" with just the height and width set... no margins needed.

If you're struggling to understand this stuff, then consider doing some reading up on the box model. Also helpful to you would be the firebug plugin for firefox (www.getfirebug.com). The "layout" view for inspected elements gives a quite elegant explanation of how dimensions, margins and padding are applying on the element you are looking at.

Hope that helps in some way

David

Oh, and Proc... Padding can be a very useful tool in a web designer's toolbox... You just have to know how to use it right, and try not to mix in padding and margins on the same element, as that is when box model rendering problems start to crop up. Margins are all well and good, but sometimes padding is a better option.

proc355 · 17-01-2008, 13:16

and oh djeglin, i do bloody know - i was referring to the problem above you sanctimonious twat

Limbo · 17-01-2008, 13:32

Meeeeow.

Simple rule of thumb - don't pad elements with a width applied - a concept that took me ages to get used to - but once you fix certain aspects and use the block property for the rest it's easy peasy...helps avoid loads of display issue in IE

text-align:center; and margin:0 auto; are your friends

bazzle · 17-01-2008, 13:33

So, if I had a 100x200 containing box and a 100x100 box inside, and I wanted to push the small box to the bottom of the containing box, then adding 100px padding to the top would have the effect of increasing the size of the containing box to 100x300. Even though there is space within the box that the small box can be pushed down into.

This goes against my logic tbh, thanks for your help tho. I will have a look at the box model to try and get a bit more understanding.

Limbo · 17-01-2008, 13:42

IE5-6 doubles padding on container elements with widths/heights - It's fucking annoying

e.g. a container with a width set to 300px and padding 20px will display at 340px.

So try to avoid using both - and pad the contents - it's usually possible to do this without adding extra markup.

2Dfruit · 17-01-2008, 14:44

i hate padding and ie

ahh

bazzle · 17-01-2008, 15:39

Quote:

Originally Posted by Limbo

Meeeeow.

Simple rule of thumb - don't pad elements with a width applied - a concept that took me ages to get used to - but once you fix certain aspects and use the block property for the rest it's easy peasy...helps avoid loads of display issue in IE

text-align:center; and margin:0 auto; are your friends

So how would you, or anyone create a simple box with a smaller box centred inside, like I've attempted to do above? could you quote the css code you would use.

bazzle · 17-01-2008, 16:01

Quote:

Originally Posted by Limbo

Meeeeow.
don't pad elements with a width applied

That's a golden rule,

I think i'm starting to understand padding now.

Code:


#bigredbox2{
background-color:#FF0000;
margin:100px;
padding:50px 50px 50px 50px;
float:left;
}

#littlebluebox2{
background-color:#0000FF;
height:200px;
width:200px;
}

roto · 17-01-2008, 16:44

She's a beaut...

Stare at it for a while. See if you can avoid a headache.

bazzle · 17-01-2008, 17:06

Best bit of web design I've done in ages.

djeglin · 18-01-2008, 05:45

Glad you got it sorted out... anyone else think that Proc was more than a little over-sensitive back there? :P

bazzle · 18-01-2008, 17:29

Thanks for the help mate.

He might have been a bit OTT but a bit of light hearted name calling doesn't hurt anyone.

17-01-2008, 13:10	#2 (permalink)
proc355 Senior Member Join Date: Sep 2006 Location: Glasvegas Posts: 866	1st example add a float:left; to the blue box 2nd you're not taking the addition of the padding in to account for the size - width:200px;height:200px; for the big box dont pad __________________ meh.

17-01-2008, 13:10	#3 (permalink)
djeglin goober :-) Join Date: Dec 2006 Location: Birmingham, UK Posts: 532	Padding isnt included in the "width" and "height" dimensions... So if you want a 200px square box, centered inside a 300px square box, your math is right, but your implementation is wrong. What you would actually need to do is create your #bigredbox with a height and width of 200px, and a padding of 50px, and then your "#littlebluebox" with just the height and width set... no margins needed. If you're struggling to understand this stuff, then consider doing some reading up on the box model. Also helpful to you would be the firebug plugin for firefox (www.getfirebug.com). The "layout" view for inspected elements gives a quite elegant explanation of how dimensions, margins and padding are applying on the element you are looking at. Hope that helps in some way David Oh, and Proc... Padding can be a very useful tool in a web designer's toolbox... You just have to know how to use it right, and try not to mix in padding and margins on the same element, as that is when box model rendering problems start to crop up. Margins are all well and good, but sometimes padding is a better option. __________________ My signature sucks.

17-01-2008, 13:16	#4 (permalink)
proc355 Senior Member Join Date: Sep 2006 Location: Glasvegas Posts: 866	and oh djeglin, i do bloody know - i was referring to the problem above you sanctimonious twat __________________ meh.

17-01-2008, 13:32	#5 (permalink)
Limbo Happy Easter. Join Date: Feb 2005 Posts: 6,336	Meeeeow. Simple rule of thumb - don't pad elements with a width applied - a concept that took me ages to get used to - but once you fix certain aspects and use the block property for the rest it's easy peasy...helps avoid loads of display issue in IE text-align:center; and margin:0 auto; are your friends __________________ CSS Search Engine

17-01-2008, 13:42	#7 (permalink)
Limbo Happy Easter. Join Date: Feb 2005 Posts: 6,336	IE5-6 doubles padding on container elements with widths/heights - It's fucking annoying e.g. a container with a width set to 300px and padding 20px will display at 340px. So try to avoid using both - and pad the contents - it's usually possible to do this without adding extra markup. __________________ CSS Search Engine

17-01-2008, 13:33	#6 (permalink)
bazzle Senior Member Join Date: Aug 2007 Location: Derby uk Posts: 720	So, if I had a 100x200 containing box and a 100x100 box inside, and I wanted to push the small box to the bottom of the containing box, then adding 100px padding to the top would have the effect of increasing the size of the containing box to 100x300. Even though there is space within the box that the small box can be pushed down into. This goes against my logic tbh, thanks for your help tho. I will have a look at the box model to try and get a bit more understanding.

17-01-2008, 14:44	#8 (permalink)
2Dfruit Biscuit Join Date: Jun 2006 Location: Ireland Posts: 1,118	i hate padding and ie ahh __________________ OH HAI!

17-01-2008, 16:44	#11 (permalink)
roto It's French: FRAHgeeeeLAY Join Date: Apr 2003 Location: Crimbo Barco del Amor Posts: 4,676	She's a beaut... Stare at it for a while. See if you can avoid a headache. __________________ fun: HGC v.4 \| last.fm: DT \| me \| *oi! fck u roto: ...via meebo! New to interweb design?** Your friends at dt can help.

17-01-2008, 17:06	#12 (permalink)
bazzle Senior Member Join Date: Aug 2007 Location: Derby uk Posts: 720	Best bit of web design I've done in ages.

18-01-2008, 05:45	#13 (permalink)
djeglin goober :-) Join Date: Dec 2006 Location: Birmingham, UK Posts: 532	Glad you got it sorted out... anyone else think that Proc was more than a little over-sensitive back there? :P __________________ My signature sucks.

18-01-2008, 17:29	#14 (permalink)
bazzle Senior Member Join Date: Aug 2007 Location: Derby uk Posts: 720	Thanks for the help mate. He might have been a bit OTT but a bit of light hearted name calling doesn't hurt anyone.

Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)

Thread Tools	Search this Thread
Show Printable Version Email this Page	Search this Thread: Advanced Search