CSS Padding

[bm25]

Could you please explain why in the html below there is 20 px gap between left side bar and content div.

My understanding is 190px left side bar width + 530 px content div width + 2*10 wrapper padding = 740px max body or wrapper width so there should not be any gap.

thank you

<!DOCTYPE
HTML
PUBLIC
"-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">

<HTML>
<HEAD>
<TITLE>

</TITLE>
<META http-equiv=content-type content="text/html; charset=utf-8">

<STYLE type=text/css>
#productsandser vices { POSITION: static } #basicmenu {_zoom: 1;}
body {margin:0; padding:0; text-align:center; width:740px; background-color:yellow}
#wrappe {margin-left:auto; margin-right:auto; padding:0; text-align:left; width:740px; background-color:green; padding:10px}
#wrapper {position:relat ive; top:0; left:0; width:740px; background-color:green; padding:10px}
#leftSideBar {padding:0; margin:0; position:absolu te; top:20px; left:0; width:190px; background-color:blue}
#content1 {margin: 20px 0 540px 0px; background-color:gray}
#content {padding:0; margin:0; float:right; position:absolu te; top: 20px; right:0; width:530px; background-color:gray}
#header{positio n:absolute; top:0; left:0; width:740px; margin:0; padding:0; background-color:white}
#footer {background-color:red}
</STYLE>

<META content="MSHTML 6.00.2900.5880" name=GENERATOR> </HEAD>
<BODY class="yui-skin-sam">
<div id="wrapper">
<div id="header">hea der
</div>
<div id="leftSideBar ">sidebar sidebar sidebar sidebar sidebar
</div>
<div id="content">co ntent content content content content content content content content content content content content contentcontent content content content content content content contentcontent content content content content content content contentcontent content content content content content content
</div>
<div id="footer">foo ter
</div>
</div>
</BODY>
</HTML>

[Ashwani Sharma]

You are using all absolute properties in your all container div's that's why your sidebar div and content div is not using padding of wrapper div. Just convert all absolute properties to relative that will work fine for you.

Ashwani Sharma

[bm25]

If sidebar div and content div are not using padding of wrapper div why do I still see the gap of 20px between side bar and content div if I change left side bar width to 200px and content div to 540? 200+540=740 wrapper width.

#leftSideBar {padding:0; margin:0; position:absolu te; top:20px; left:0; width:200px; background-color:blue}
#content {padding:0; margin:0; float:right; position:absolu te; top: 20px; right:0; width:540px; background-color:gray}

thanks