1. Home
  2. Forums Index
  3. Browser Side / CSS 1:09 pm May 1, 2026

Forum Moderators: not2easy

Message Too Old, No Replies

float right in IE 7

basic 2 column layout, left column fixed, right column floats

         

willieg

10:40 pm on Jan 5, 2012 (gmt 0)

10+ Year Member



Greetings. I've spent most of the day looking for hacks or solutions to this in IE 7 or less. I've a header on the page that is fixed, a left column that is fixed, a right column that floats right, and a footer that is fixed. The right floating column doesn't align to the top of the left column but falls below it, still floating right.

Doctype:
<!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' xml:lang='en' lang='en'>

Char set:
<meta http-equiv='content-type' content='text/html; charset=utf-8' />

relevant css:

<style type='text/css'>
html body {
width: 900px;
height: 100%;
margin: 0 auto;
background-color:#CCCCCC;
font: .85em/1em trebuchet, arial, helvetica, sans-serif;
color: #000000;
}
.folio {
width: 100%;
height: 190px;
background:url('../assets/header2.jpg') center top no-repeat;
}
.lcol {
width: 250px;
height: 400px;
background-color: #000000;
padding: 10px;
display: inline-block;
color: #FFFFFF;
}
.rcol {
float:right;
width: 67%;
height: 400px;
padding: 10px;
margin:0 -3px;
overflow:scroll;
display: inline-block;
}
.footer {
padding: 10px 10px 0 280px;
height: 70px;
text-align: left;
color: #CCCCCC;
background-color: #000000;
display:block;
clear:both;
}
</style>

relevant HTML:

<div class='folio'>
content
</div> <!-- end folio -->
<div class='lcol'>
content - this is just a list of links
</div> <!-- end lcol -->
<div class='rcol'>
content - decisions are made on what content using php
</div>
<div class='footer'>
content
</div>

If anyone can help enlighten my I'd be most grateful. I've a client that is stuck with IE 7 due to government contracts. The css works in all other browsers tested - Firefox Mac and Win, IE 8 +, Chrome... tested on Adobe BrowserLab.

Paul_o_b

1:20 am on Jan 6, 2012 (gmt 0)

10+ Year Member



Hi,

You'd need to float the left column for IE7 as it doesn't understand inline-block on block elements, although it can be made to understand inline-block if you add "*display:inline;zoom:1.0" to the rule but that won't help here either as IE7 needs floats to be first in the html anyway. (If inline content precedes a float then it is displaced to make way for the float as long as they are both on the same line but IE7 and under get this wrong).

Therefore always work on the assumption that floated content must be first in the html where you want other content to wrap.

So for your example just float both and left columns and the issue is avoided.

You should also add a page wrapper as IE7 does not like using the body to center the page and will be very jumpy and misplace the page on first load.

e.g. 


<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type='text/css'>
html, body {
height: 100%;
margin:0;
padding:0;
}
body {
background-color:#ccc;
font: 85%/1em trebuchet, arial, helvetica, sans-serif;
color: #000;
}
#wrap {
width: 900px;
margin: 0 auto;
}
.folio {
width: 100%;
height: 190px;
background:url('../assets/header2.jpg') center top no-repeat;
}
.lcol {
width: 250px;
height: 400px;
background: #000;
padding: 10px;
float:left;
color: #fff;
}
.rcol {
float:right;
width: 610px;
height: 400px;
padding: 10px;
margin:0;
overflow:scroll;
}
.footer {
padding: 10px 10px 0 280px;
height: 70px;
text-align: left;
color: #ccc;
 background:#000;
clear:both;
}
</style>
</head>

<body>
<div id="wrap">
<div class='folio'> content </div>
<!-- end folio -->
<div class='lcol'> content - this is just a list of links - </div>
<!-- end lcol -->
<div class='rcol'> content - decisions are made on what content using php </div>
<div class='footer'> content </div>
</div>
</body>
</html>



It is not usual to fix the height of elements like that as it becomes very restrictive and indeed should users resize their text the text will spill out of the containers unless you put scrollbars everywhere which should also be avoided.

Hope that's of some use anyway.

willieg

4:47 pm on Jan 6, 2012 (gmt 0)

10+ Year Member



thanks for the quick and informative reply. I discovered late yesterday that loading the float rcol prior to the lcol in the html worked. Do you think it still advisable that I float the lcol? And are more modern browsers OK with using the body to center the content, or should I still use a wrapper?

Paul_o_b

7:36 pm on Jan 6, 2012 (gmt 0)

10+ Year Member



Yes float both columns because if you have a floated element in the non floated column and you try to clear it then it will drop below the whole floated column.

Modern browsers (ie8+) are ok with using the body to center a layout but it still throws the zoom out in ie8+. I never use the body for centring for legacy reasons and for the zoom problem. For the sake of saving one wrapping div its just not worth the risk.
 

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

  1. Home
  2. Forums Index
  3. Browser Side / CSS 1:09 pm May 1, 2026