homepage Welcome to WebmasterWorld Guest from 54.234.141.47
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member

Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

    
float right in IE 7
basic 2 column layout, left column fixed, right column floats
willieg



 
Msg#: 4404216 posted 10:40 pm on Jan 5, 2012 (gmt 0)

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

10+ Year Member



 
Msg#: 4404216 posted 1:20 am on Jan 6, 2012 (gmt 0)

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



 
Msg#: 4404216 posted 4:47 pm on Jan 6, 2012 (gmt 0)

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

10+ Year Member



 
Msg#: 4404216 posted 7:36 pm on Jan 6, 2012 (gmt 0)

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.

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved