css padding inside absolute div

Dev Shed Forums Sponsor:

July 17th, 2003, 05:48 PM

mldeveloper

Junior Member

Join Date: Jul 2003

Posts: 1

Time spent in forums: < 1 sec
Reputation Power: 0

css padding inside absolute div

PHP Code:


		
			
<html>

<head>

<style type="text/css">

body {

    margin: 0px;

}

#leftbox {

    border: 1px dashed;

    position: absolute;

    width: 150px;

    /*padding: 10px;*/

}

#rightbox {

    border: 1px dashed;

    position: absolute;

    left: 151px;

    /*padding: 10px;*/

}

</style>

</head>



<body>

<div id="leftbox">

  Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse potenti. Sed hendrerit purus sed elit. Duis vitae nunc. In tempor fermentum leo. Fusce dapibus.

</div>

<div id="rightbox">

  Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse potenti. Sed hendrerit purus sed elit. Duis vitae nunc. In tempor fermentum leo. Fusce dapibus.

  Quisque orci. Curabitur in sapien. Nullam in pede. Aenean lacinia augue ac massa. Maecenas ut risus et lectus tempor egestas. Nulla tellus tellus, posuere sed, bibendum

  vitae, mattis eu, odio. Morbi sagittis pede vel tortor. Fusce vestibulum congue nisl. Ut vel diam sit amet felis iaculis aliquam. Nulla wisi tortor, mollis sed, pellentesque

  quis, facilisis non, dui. Ut massa. Duis egestas purus vel ante. Nam condimentum pulvinar purus. Morbi tempus dolor id ante. Maecenas nibh enim, vulputate vitae, ultrices

  non, pulvinar eu, metus. Sed sit amet tortor. Curabitur at lacus sit amet lorem porttitor commodo. Proin justo. Aliquam erat volutpat. Fusce sit amet tortor. Curabitur quis

  sem et metus posuere tempus. Curabitur lobortis est nec massa.

</div>

</body>

</html>

When I use that code as it currently is, everything loooks fine in IE and netscape, as soon as I uncomment the padding, IE will preserve the positions and the div's will be padded accordingly, in netscape and Firebird, the rightbox and leftbox divs overlap? How can I add padding to the div without the overlap?

July 18th, 2003, 01:14 AM

kk5st

Thanks Johnny Hart (BC) R.I.P.

Join Date: May 2003

Location: Dallas

Posts: 5,268

Time spent in forums: 1 Month 1 Week 4 Days 10 h 31 m 27 sec
Reputation Power: 1955

This is IE5.x's buggy rendering. The proper way to do things is for the padding and border to be added to the width. Modern browsers such as NS6+, Mozilla, Opera, and others do this correctly. This seems to be the only CSS bug that got fixed in IE6.

As an example, the box should be 100+20+2=122px wide if width:100px; padding:10px; border: 1px;

IE5.x will render the same box as 100px wide. IE subtracts the padding and border from the width.

For a hack, check this site .

Now that you can make IE5x work correctly, you can adjust your positioning appropriately.

__________________
There are those who manage to build a web site without knowing what they're doing; thereby proving to themselves they do, indeed, know what they're doing.

My html and css workshop, demos and tutorials.
Ask a better question, get a better answer.

Last edited by kk5st : July 18th, 2003 at 02:38 AM.

css padding inside absolute div

Developer Shed Advertisers and Affiliates