[css-d] Why is child wider than parent?
Hello,
Can anyone please tell me why the child (#band) is wider than the boundary of
its parent (#outcontainer)? I set width:100% on the child to make sure it took
up the entire width of the parent, but it went wider. Can't figure out what
I'm missing here. It may be the concurrent use of display:table but I'm not
sure why setting width still wouldn't work. If I set the width to 98% it
almost fits inside the parent.
http://www.sbctc.edu/OAAInstruction.html
style type=text/css
body {background-color:#EDEBE0;}
#outercontainer {margin:0 20px 20px
20px;height:100%;background-color:#CC3366;padding-top:5px;}
#band {height: 52px;
background-color:#013E7D;padding-right:20px;text-align:right;vertical-align:middle;display:table;width:100%;}
#main {width:90%; min-height:80%;;margin:auto;margin-top:30px;}
h1 {color:#FF;font: 1.4em Arial, Helvetica,
sans-serif;margin:0;display:table-cell;vertical-align:middle;}
p {font: .75em Arial, Helvetica, sans-serif;}
/style
Thanks for any help.
Angela French
Internet Specialist
State Board for Community and Technical Colleges
360-704-4316
afre...@sbctc.edumailto:afre...@sbctc.edu
www.checkoutacollege.comhttp://www.checkoutacollege.com
www.sbctc.eduhttp://www.sbctc.edu
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Why is child wider than parent?
You have...
#band {padding-right:20px; width:100%;}
...which makes the band 20px wider than its parent.
regards
Georg
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Why is child wider than parent?
Darn box model!
Thanks.
-Original Message-
From: css-d-boun...@lists.css-discuss.org
[mailto:css-d-boun...@lists.css-discuss.org] On Behalf Of Georg
Sent: Thursday, November 06, 2014 2:40 PM
To: css-d@lists.css-discuss.org
Subject: Re: [css-d] Why is child wider than parent?
You have...
#band {padding-right:20px; width:100%;}
...which makes the band 20px wider than its parent.
regards
Georg
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/ List policies --
http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Why is child wider than parent?
On Thu, Nov 6, 2014 at 5:29 PM, Angela French afre...@sbctc.edu wrote:
Hello,
Can anyone please tell me why the child (#band) is wider than the boundary of
its parent (#outcontainer)? I set width:100% on the child to make sure it
took up the entire width of the parent, but it went wider. Can't figure out
what I'm missing here. It may be the concurrent use of display:table but I'm
not sure why setting width still wouldn't work. If I set the width to 98% it
almost fits inside the parent.
http://www.sbctc.edu/OAAInstruction.html
Angela,
Try
#band {height: 52px;
background-color:#013E7D;padding-right:/*20px*/4%;text-align:right;vertical-align:middle;display:table;width:96%;/*100%*/}
Best,
David Laakso
--
Chelsea Creek Studio
http://ccstudi.com
desktop | laptop | tablet | mobile
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Why is child wider than parent?
Thanks! I don't code enough anymore. :-(
-Original Message-
From: David Laakso [mailto:laakso.davi...@gmail.com]
Sent: Thursday, November 06, 2014 2:44 PM
To: Angela French
Cc: css-d (css-d@lists.css-discuss.org)
Subject: Re: [css-d] Why is child wider than parent?
On Thu, Nov 6, 2014 at 5:29 PM, Angela French afre...@sbctc.edu wrote:
Hello,
Can anyone please tell me why the child (#band) is wider than the boundary of
its parent (#outcontainer)? I set width:100% on the child to make sure it
took up the entire width of the parent, but it went wider. Can't figure out
what I'm missing here. It may be the concurrent use of display:table but I'm
not sure why setting width still wouldn't work. If I set the width to 98% it
almost fits inside the parent.
http://www.sbctc.edu/OAAInstruction.html
Angela,
Try
#band {height: 52px;
background-color:#013E7D;padding-right:/*20px*/4%;text-align:right;vertical-align:middle;display:table;width:96%;/*100%*/}
Best,
David Laakso
--
Chelsea Creek Studio
http://ccstudi.com
desktop | laptop | tablet | mobile
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Why is child wider than parent?
Darn box model!
Well, the box model isn't set in stone you know.
On November 6, 2014 at 5:43 PM Angela French afre...@sbctc.edu wrote:
Darn box model!
Thanks.
-Original Message-
From: css-d-boun...@lists.css-discuss.org
[mailto:css-d-boun...@lists.css-discuss.org] On Behalf Of Georg
Sent: Thursday, November 06, 2014 2:40 PM
To: css-d@lists.css-discuss.org
Subject: Re: [css-d] Why is child wider than parent?
You have...
#band {padding-right:20px; width:100%;}
...which makes the band 20px wider than its parent.
regards
Georg
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/ List policies --
http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Why is child wider than parent?
Take a look at box-sizing.
http://css-tricks.com/box-sizing/
Adding it in late in the game will cause issues, however...
On Thu, Nov 6, 2014 at 5:43 PM, Angela French afre...@sbctc.edu wrote:
Darn box model!
Thanks.
-Original Message-
From: css-d-boun...@lists.css-discuss.org
[mailto:css-d-boun...@lists.css-discuss.org] On Behalf Of Georg
Sent: Thursday, November 06, 2014 2:40 PM
To: css-d@lists.css-discuss.org
Subject: Re: [css-d] Why is child wider than parent?
You have...
#band {padding-right:20px; width:100%;}
...which makes the band 20px wider than its parent.
regards
Georg
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/ List policies --
http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
--
Tom Livingston | Senior Front-End Developer | Media Logic |
ph: 518.456.3015x231 | fx: 518.456.4279 | medialogic.com
#663399
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
