I have a fairly simple page (attached below) with a couple of nested
divs. The issue is with the paddedtext class. If I have this set to
100% width the text hangs over the edge of the tableborder div in
Firefox. If I take the width off its fine in Firefox, but pushes
tableborder wider in IE6.
Could anyone give me a pointer on this.
Help Appreciated. Thanks.
<html>
<head>
<style>
..tableborder
{
border-right: silver 1px solid;
border-top: silver 1px solid;
border-left: silver 1px solid;
border-bottom: silver 1px solid;
}
..mainpane
{
width: 750px;
text-align: left;
height:auto;
margin: 0 auto;
position:relative;
}
..leftpane
{
left: 0px;
width: 150px;
position: absolute;
top: 0px;
}
..rptwocol
{
left: 160px;
width: 590px;
position: absolute;
top: 0px;
}
..paddedtext
{
text-align: justify;
width: 100%;
padding: 4px;
}
</style>
</head>
<body>
<div class="mainpane">
<div class="leftpane">
Stuff in the left
</div>
<div class="rptwocol">
<div class="tableborder">
<div class="paddedtext">
Hot on the heels of the Halifax's annual First Time Buyer review,
published Saturday, deputy prime minister John Prescott has announced a
series of measures to help people struggling to buy their first house.
</div>
</div>
</div>
</div>
</div>
</body>
</html>
