Menu
Hi Guys, I’m trying to float 3 boxes which are fixed withs across the page but have them distibuted evenly (so that the space around them shrinks when the browser is smaller not the boxes).
I can get them to go across and behave as I want them to, but I cannot get the clearing to work so that they all sit on the same line.
Can anyone help??
I have put the code for this below, as you will see “box 3” is sitting lower than box 1 and box 2 and I want them all on the same line.
[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”>
<head>
<style type=”text/css”>
#box1
{
border:2px solid #006633;
width: 100px;
float:left;
}
#box2
{
border:2px solid #000000;
width: 100px;
float:none;
margin:auto;
}
#box3
{
border:2px solid #CCCC33;
width: 100px;
float: right;
}
</style>
<meta http-equiv=”Content-Type” content=”text/html; charset=iso-8859-1″ />
<title>Untitled Document</title>
</head>
<body>
<div id=”box1″>
<p>This is box 1 </p>
</div>
<div id=”box2″>
<p>This is box 2 </p>
</div>
<div id=”box3″>
<p>This is box 3 </p>
</div>
</body>
</html>