Forum Moderators: not2easy
.lefty {
width :50%;
float :left;
}
.righty{
width :50%;
float :right;
}
padding :5px;
the same problem comes up when i try to add a border :
border-RIGHT-width :1px;
the extra spacing is being added OUTSIDE the 50% width... making it more like... 50% + 5px
no idea how to get around this, I want padding, and borders... but I want exactly 100% width, not 100%+10px
thanks!
-Arron
try it like this...
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="language" content="english">
<meta http-equiv="Content-Style-Type" content="text/css"><title></title>
<style type="text/css">
#lefty,#righty {
float:left;
width:50%;
}
#leftyContent,#rightyContent {
padding:10px;
margin:10px;
border:1px solid #000;
}
</style><!--[if IE 6]>
<style type="text/css">
#lefty {
width:49.99%;
}
</style>
<![endif]--></head>
<body><div id="lefty">
<div id="leftyContent">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Proin massa. Nam vehicula.
Morbi velit nisi, mollis id, ultrices luctus, adipiscing sit amet, lectus. Nunc rhoncus
nisl ac enim. Maecenas vestibulum dolor ut velit. Maecenas condimentum pulvinar purus.
Pellentesque ac ipsum. Curabitur sodales, elit vel molestie hendrerit, elit odio rhoncus tellus,
nec gravida enim urna id velit. Donec nec tellus. Vestibulum nulla. Curabitur enim arcu,
ornare id, placerat eget, nonummy vitae, mauris. Nulla rutrum semper odio. Duis vulputate
ornare mauris. Praesent eget nibh sed ante ultricies scelerisque. Duis eget felis ut arcu porta
bibendum. Mauris rutrum. Vivamus consectetuer purus sit amet mi. Suspendisse eu augue.
</div>
</div><div id="righty">
<div id="rightyContent">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Proin massa. Nam vehicula.
Morbi velit nisi, mollis id, ultrices luctus, adipiscing sit amet, lectus. Nunc rhoncus
nisl ac enim. Maecenas vestibulum dolor ut velit. Maecenas condimentum pulvinar purus.
Pellentesque ac ipsum. Curabitur sodales, elit vel molestie hendrerit, elit odio rhoncus tellus,
nec gravida enim urna id velit. Donec nec tellus. Vestibulum nulla. Curabitur enim arcu,
ornare id, placerat eget, nonummy vitae, mauris. Nulla rutrum semper odio. Duis vulputate
ornare mauris. Praesent eget nibh sed ante ultricies scelerisque. Duis eget felis ut arcu porta
bibendum. Mauris rutrum. Vivamus consectetuer purus sit amet mi. Suspendisse eu augue.
</div>
</div></body>
</html>
Note:-
For some strange reason IE6 believes that 50%+50% is greater than 100%.
I do not know if the same applies to IE7 and IE8 so I have just added a conditional comment
for that browser to cure the problem.
birdbrain
