Compatibility View layout issue

**hexic81** · 03-10-2011 05:39 PM

I have a floating right column on my page that moves with the sizing of the window. It works fine in IE8, FF and Rockmelt, but when I turn on compatibility mode it moves to the left and sticks to the right side of my center column and will collapse and disappear when the window is sized down. The code is below. Any ideas?

It's designed so that the center column has a fixed width of 665px and won't shrink down on window resizing, hence the extra out <div>s.

Thank you to everyone who has helped me with this page so far.

<!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>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
body {
min-width: 1000px;
margin:0;
padding:0;
background-position: top center;
background-color:#C1A898;
}

#left-side-outer {
width: 506px;
float: left;
margin-right: -330px;
height: 100px;
}

#left-side{
margin-right: 665px;
background-color: rgb(177, 127, 100);
height: 100%;
text-align: center;
}

#center-column {
width: 665px;
float: left;
color: #000000;
background-color: rgb(193, 168, 152);
position: relative;
z-index: 10;
height: 100%;
text-align: center;
}

#right-side-outer {
width: 185px;
min-width: 185px;
float: right;
margin-left: -534px;
height: 100%;
}

#right-side {
height: 100%;
background-color: rgb(177, 127, 100);
text-align: center;
float: right;
clear: left;
}

#header{
clear:both;
height: 182px;
text-align: left;
}

#footer{
clear:both;
height: 100px;
text-align: center;
background-color: rgb(177, 127, 100);
}

</style>
</head>
<body>
<div id="header">Header Image</div>
<div id="left-side-outer" style="width: 516px" class="container">
<div id="left-side" style="width: 162px" class="container">
Left side</div>
</div>
<div id="center-column" class="container">Center Content<br />
</div>

<div id="right-side-outer" class="container">
<div id="right-side" style="width: 185px" class="container">Right Column</div>
</div>
<div id="footer">Footer</div>
</body>
</html>

**Kor** · 03-11-2011 07:42 AM

A little bit clumsy your CSS. You have clear the float where you should not, but you did not clear the float when you should. Don't use margins if it is not necessary.

Think your document as being split into 3 rows: header, content and footer
Think your content as being split into 3 floated columns: left, center and right. You will need a 4th empty div there, to clear the float.

Could be as simple as that:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">

<style type="text/css">
*{
margin:0;
padding:0;
}
html body{
min-width:1000px;
background:#C1A898;
}
.header {
width:100&#37;;
height:182px;
}
.content{
width:100%;
}
.left{
width:162px;
height:100px;
float:left;
background:#B17F64;
}
.center{
float:left;
}
.right{
width:185px;
float:right;
background:#B17F64;
}
.clear{
clear:both;
}
.footer{
width:100%;
height:100px;
background:#B17F64;
}
</style>

<body>
<div class="header">Header image</div>
<div class="content">
	<div class="left">Left side</div>
	<div class="center">Center content</div>
	<div class="right">Right side</div>
	<div class="clear"></div><!-- this will clear the float to keep the parent's overflow-->
</div>
<div class="footer">Footer</div>
</body>
</html>

Now this would look the same, all over the browsers, versions, compatibilities, etc...

Just a note: CSS min-width works buggy in IE7. It will work in this case, but in other cases you should use overflow:visible, to make IE7 to be able to distinguish between width and min-width

**hexic81** · 03-11-2011 01:51 PM

Thanks for the help. I'll add my content and check for issues.

Thread: Compatibility View layout issue

Thread Tools

Display

Compatibility View layout issue

Thread Information

Users Browsing this Thread

Bookmarks

Bookmarks

Posting Permissions