[thelist] CSS padding with 100% width?

Dmitry Yeskin yeskin at webstylestudio.com
Fri Jan 14 03:54:46 CST 2005


Hello, guys!

Can anybody help me with CSS?

I have a problem:
when I have div in other div and that div in other and every divs has a 
padding and width 100% it showing incorrect in all browsers except IE.

I know the reason - IE count padding as internal part of width, but all others 
just add the padding values to width.

But how to make it looks same and correct on all browsers? The problem is that 
I can't (or just don't know how) to decrease 100% with my fixed padding 
values (at example I can't write: width : 100%-40px, when I have a padding : 
20px).

How anyone solve this problem?

Also please excuse me for my english. Probably I explained a problem bad.
For that reasons here is the sample code (just copy as any html file and see 
it in browsers):

======================== start 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" lang="en" xml:lang="en">
<head>
<style>
BODY {
margin : 0;
padding : 20px;
background : #CCCCCC;
}
#outer {
margin : 0;
width : 100%;
padding : 20px;
background : #FF0000;
float : left;
}
#inner {
margin : 0;
padding : 20px;
background : #00FF00;
width : 100%;
float : left;
}
#content {
margin : 0;
padding : 20px;
background : #FFFFFF;
width : 100%;
float : left;
}
</style>
</head>
<body>
<div id="outer">
  <div id="inner">
    <div id="content">    
    <br /><br /><br /><br /><br />
    </div>
  </div>
</div>
</body>
</html>
======================== end code ===============================

Can anyone help me? I very need this problem fixed. I want to see it in all 
browsers as I can see it now in IE.

Thanks a lot.

-- 
With best regards,
Dmitry Yeskin
CEO of "Web Style" Studio, LLC
Official Website: http://www.webstylestudio.com
Unofficial Website: http://www.webstylemasters.com
Media Department: http://www.webstylemedia.com
Open Source Projects: http://www.webstyleopen.com
Personal E-Mail: yeskin at webstylestudio.com
Work Phone: +38-057-3332989
Cell Phone: +38-050-9859731


More information about the thelist mailing list