3 Column Layout ie7 NIGHTMARE

Get Started
1

Hey Guys,

I’ve been working on a three column layout for the first time
using HTML5 and CSS3 where possible. Everything floats nicely
in Firefox, Chrome and Safari [ATTACH]see here[/ATTACH] but
in ie7 the third column breaks and appears below the first
[ATTACH]see here[/ATTACH]. Below is the CSS I’m using.
Would greatly appreciate any help on this. Thanks in advance.

M/


/*============
Features
=============*/

section#features {
width: 960px;
padding-top: 120px;
}

section#features div {
float: left;
margin-right: 5%;
width:30%;
}
	
section#features div h1 {
color: #09c;
font-size: 40px;
letter-spacing: -1px;
margin-bottom: 20px;
}
		
section#features div p {
font-size: 11px;
line-height: 1.65em;
letter-spacing: .21px;
}

section#features div span {
color:#333;
font-weight: bold;
}

section#features div p + p {
margin-top: 1.5em; 
}
		
section#features div:nth-child(4){
margin-right: 0;
}


/*============
Form
=============*/

#contact { 
margin-bottom: 0px; 
}

input[type="text"] { 
width: 93%; 
}

textarea { 
min-width: 93%; 
max-width: 93%;
height: 95px; 
}

form p { 
font-weight: bold;
color: #09c;
margin-top:5px;
margin-bottom: 5px;
}

input, textarea { 
background-color: rgba(255, 255, 255, 0.4); 
border: 5px solid rgba(0, 0, 0, 0.15); 
padding: 5px; 
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif; 
color: #333; 
font-size: 10px; 
-webkit-border-radius: 5px; 
margin-bottom: 10px; 
margin-top: 0px; 
}

input:hover, textarea:hover { 
background-color: rgba(255, 255, 255, 0.4); 
border: 5px solid rgba(0, 0, 0, 0.35); 
padding: 5px; 
font-size: 10px; 
-webkit-border-radius: 5px; 
margin-bottom: 10px; 
margin-top: 0px; 
}

input:focus, textarea:focus { border: 3px solid #0, 0, 0, 0.15; background-color: #FFF); outline: none;}  

input[type="submit"] { 
display: inline-block;
	outline: none;
	cursor: pointer;
	text-align: center;
	text-decoration: none;
	font: 12px "Lucida Sans Unicode", "Lucida Grande", sans-serif;
	padding: 7px 14px;
	text-shadow: 0 1px 1px rgba(0,0,0,.3);
	-webkit-border-radius: 1.25em; 
	-moz-border-radius: 1.25em;
	border-radius: 1.25em;
	-webkit-box-shadow: 0 1px 3px rgba(0,0,0,.4);
	-moz-box-shadow: 0 1px 3px rgba(0,0,0,.4);
	box-shadow: 0 1px 3px rgba(0,0,0,.4);
	color: #ffffff;
	border: solid 1px #666666;
	background: #666666;
	background: -webkit-gradient(linear, left top, left bottom, from(#999999), to(#666666));
	background: -moz-linear-gradient(top,  #999999,  #666666);
	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#999999', endColorstr='#666666');
}

input[type="submit"]:hover { 
	background: #333333;
	color: #cccccc;
	border: solid 1px #333333;
	background: -webkit-gradient(linear, left top, left bottom, from(#666666), to(#333333));
	background: -moz-linear-gradient(top,  #666666,  #333333);
	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#666666', endColorstr='#333333');
}

input[type="submit"]:active { 
	position: relative; 
	top: 1px;
	outline: none;
}

input[type="submit"]::-moz-focus-inner, input[type="button"]
::-moz-focus-inner {   
    border : 0px;
}
2

you need to clear your floats!

/* Clearing a float container without source markup */


.clearfix:after
{
	clear: both;
	content: '.';
	display: block;
	visibility: hidden;
	height: 0;
}

.clearfix	{ display: inline-block; }

* html .clearfix	{ height: 1%; }

.clearfix	{ display: block; }

After floating in your html add this line.

<div class="clearfix"></div>
3

Thanks @InsiteFX…problem solved.

4

Nice catch, Insite. Just as a general observation for others on this thread, especially the novices, the Position is Everything link Insite posted is an essential for learning about floats. In fact, just about everything on that site is essential…!

5