How to set the widths for float:left <div> tags; put tags inside container <div>?

HTML & CSS
1

Hello;

I have got two questions about the CSS code below. It does not seem to be working properly.

The first question is about the width of the columns. If I adjust all of the percentages so that the total equals 100% all three of the <div> columns stay side-by-side.

Calculation for the percentage width of the borders:
(3px times 2) x 3 equals 18px
18px divided by 900px = .02 or 2%

Sum of the width of the borders plus the widths of each <div> tag:
15% + 68% + 15% + 2% = 100%

1). My question is this: Is the above methodology the right way to set the widths?

There is a little bit of a problem with the above method. There is a space between the outside of the right border of the div.right column and the inside of the div.container border. The space looks like it might be 1% or 2%.

If I set the sum of the borders plus the widths of the <div> tags to equal more than 100% like this:
15% + 69% + 15% + 2% = 101%
The div.right <div> column breaks and goes below the left and content <div> tags.
1a). What’s causing the 1% or 2% space between the div.right <div> tag and the inside of the div.container <div> tag? Can someone suggest how I might fix it?

My second question is about the div.container <div> tag. It will not enclose the three <div> tags (i.e. left, content, and right) unless I include the div.footer <div> tag at the bottom. I have got to include the the footer <div> tag before the div.container <div> tag will encompass the three inside tags.

If I use the div.footer <div> tag then the div.container <div> tag will encompass all of the tags.

2). My question is this: How can I get the div.container <div> tag to include the left, container, and right <div> tags without using the footer <div> tag?


div.container
{
width: 90%;
margin-left: auto;
margin-right: auto;
padding: 0;
border: 1px solid blue;
line-height:150%;
min-width: 900px;
}
div.header, div.footer
{
color: white;
background-color: gray;
clear: left;
}
h1.header
{
padding: 0;
margin: 0;
}
div.left
{
height: 550px;
width: 15%;
border: 3px solid black;
float: left;
}
div.content
{
height: 550px;
width: 68%;
border: 3px solid yellow;
float: left;
}
div.right
{
height: 550px;
border: 3px solid green;
width: 15%;
float: left;
}




<div class="container">

<div class="header"><h1 class="header">Web Site Name</h1></div>

	<div class="left">
		<p>one two three</p>
		<p>one two three</p>
		<p>one two three</p></div>
	
	<div class="content">
		<p>four five six</p>
		<p>four five six</p>
		<p>four five six</p>
		</div>
			
	<div class="right">
		<p>seven eight nine</p>
		<p>seven eight nine</p>
		<p>seven eight nine</p></div>

	<div class="footer">This is the footer</div>

</div>

Thanks.

2

Using % means browsers will make approximate calculations and rounding may differ.

3

2). My question is this: How can I get the div.container <div> tag to include the left, container, and right <div> tags without using the footer <div> tag?

Hi,
To enclose floats without a clearing element in the html you would set overflow:hidden; on the .container div for modern browsers.


div.container
{
width: 90%;
min-width: 900px;
margin: 0 auto;
border: 1px solid blue;
line-height:150%;
[COLOR=Blue]overflow:hidden;[/COLOR]/*contain floats*/
}