Simple css problem

1

it’s been a while since I did any CSS and to be honest I’ve discovered I’m more than a little rusty and I’m more than impatient so rather than work away on this problem by myself I’ve decided to post it here.

I have 3 divs. The left one has a 25% width, the middle has a 50% width and the right one has a 25% width. Now despite turning off all padding and margins the 3 don’t seem to fit on the page.

Here is my code (html)


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html dir="ltr" xml:lang="en" lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>:: Layout ::</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>

<body>
	
		<div id="leftbar"></div>
		
		<div id="midsection"></div>
		
		<div id="rightbar"></div>
	
</body>
</html>

and the css code

*
{
	margin:0px;
	padding:0px;
}
body {
  	font-family: Verdana, Geneva, Arial, helvetica, sans-serif;
	height:100%;
}
html
{	height:100%;	
	width:100%;
}
#leftbar
{
	width:25%;
	background-color:#FF0000;
	height:125px;
	float:left;
}
#midsection
{
	width:50%;
	background-color:#00FF00;
	height:100%;
	float:left;
}
#rightbar
{
	width:25%;
	background-color:#FFCC00;
	height:125px;
	float:right;
}

any ideas are welcome :beam: