Internet Explorer 6 and 7: floated elements expand to 100% width when they contain a child element floated right. Is there a workaround?
Here's a solution which makes inline-block work on IE6 as at http://foohack.com/2007/11/cross-browser-support-for-inline-block-styling/ to make the elements behave more like right-floated <div>s:
<!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" lang="en" xml:lang="en">
<head>
<title>Float with inline-block test</title>
<style type="text/css">
.container {
border-top: solid 10px green;
float: left;
}
.tester1,
.tester2 {
float: right;
}
.tester1 {
border-top: solid 10px blue;
}
.tester2 {
border-top: solid 10px purple;
}
</style>
<!--[if lte IE 7]>
<style type="text/css">
.container {
text-align: right;
}
.tester1,
.tester2 {
float: none;
zoom: 1; display: inline;/* display: inline-block; for block-level elements in IE 7 and 6. See http://foohack.com/2007/11/cross-browser-support-for-inline-block-styling/ */
}
</style>
<![endif]-->
</head>
<body>
<div class="container">
<div class="tester1">Tester 1</div>
<div class="tester2">Tester 2</div>
</div>
</body>
</html>
Internet Explorer 6 and 7: floated elements expand to 100% width when they contain a child element floated right. Is there a workaround?
Here's a solution which makes inline-block work on IE6 as at http://foohack.com/2007/11/cross-browser-support-for-inline-block-styling/ to make the elements behave more like right-floated <div>s:
<!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" lang="en" xml:lang="en">
<head>
<title>Float with inline-block test</title>
<style type="text/css">
.container {
border-top: solid 10px green;
float: left;
}
.tester1,
.tester2 {
float: right;
}
.tester1 {
border-top: solid 10px blue;
}
.tester2 {
border-top: solid 10px purple;
}
</style>
<!--[if lte IE 7]>
<style type="text/css">
.container {
text-align: right;
}
.tester1,
.tester2 {
float: none;
zoom: 1; display: inline;/* display: inline-block; for block-level elements in IE 7 and 6. See http://foohack.com/2007/11/cross-browser-support-for-inline-block-styling/ */
}
</style>
<![endif]-->
</head>
<body>
<div class="container">
<div class="tester1">Tester 1</div>
<div class="tester2">Tester 2</div>
</div>
</body>
</html>
How to prevent floated parent with floated children from being expanded to 100% width in IE6?
I don't have access to IE6, so I can't actually check this. But you could try the following:
http://jsfiddle.net/YA7CN/
(putting the blocks in a container with clear:both)
As I said, it might give you the same problem... but it's an option.
By the way, are you designing for a specific public that uses ie6? If not, I wouldn't be too worried about things looking different in it, you will get mad adapting everything to a version that crashes everything it touches!
IE DIV with absolute positioning width goes to 100% of screen when it has a floating element inside
You absolutely have to set the width of an absolutely positioned element if it contains an element floated right to get it to behave properly.
Float elements next to eachover while ignoring parent width?
I updated your code using white-space: nowrap along with display: inline-block. If you really need to do it with float: left, do what @Kurt suggested since it should work. But I really believe inline-block is the right approach here.
Check the Fiddle or look at the code here:
.parent {
width: 200px;
white-space: nowrap;
overflow: hidden;
font-size: 0;
}
.child {
display: inline-block;
width: 200px;
font-size: 1rem;
}
float right issue
Example jsBin: http://jsbin.com/ixebuf/1/ (tested on IE8, Fx)
(backgrounds are placed for testing purpose)
.container {
width: 100%;
overflow: hidden;
}
#rightCntr {
float: right;
width: 213px;
background: gray;
}
#leftCntr {
margin-right: 213px;
background: yellow;
}
DIV in IE7 ,somehow ignores the width occupies the remaining space
Ok, for starters you need a min-height on one of the background boxes, because it's breaking your gradient:
.wBoxTall .right, .gBoxTall .right {min-height: 29px;}
.wBoxTall .bottom .right, .gBoxTall .bottom .right {min-height: 0;}
Whenever you have issues in IE7, the first thing you should try is giving the element hasLayout - it's a weird little bug that means sometimes your styles don't work as they should. It's also often useful to specify a positioning. Try this:
.wBoxTall, .gBoxTall {zoom:1; position:relative}
Should I always explicitly set width on floated items?
Well it really depends on the browser, you must check the results in multiple browsers to be sure that none of them "misunderstood" your settings. I'd set a width anyway, because no browser can misunderstood that.
floated images mess up parent div's width
Add a style as below in your Stylesheet
.text {
float: left;
}
Screenshot
Related Topics
Make CSS Apply Only for Opera 11
R Markdown: How to Change Style with Internal CSS
Css: How Is Height of Block-Elements Calculated
How to Style Disabled Options in a Form
Nginx Failing to Load CSS and Js Files (Mime Type Error)
Why Selecting by Id Is Not Recommended in CSS
Differencebetween Opacity and That Through Alpha Channel (Rgba)
Understanding Display:Table-Cell; Functioning
What Does Hash (#) Sign Do Outside Loops in SASS
Differencebetween Perspective and Transform's Perspective Properties in CSS
Glyphicons Rendering as Empty Box
Compile Less Files with Source Maps
Are There Any CSS Standards That I Should Follow While Writing My First Stylesheet
3 and 2 Column Full Screen (Width & Height) Layouts (Css)
Is It Possible in SASS to Inherit from a Class in Another File
How to Set a CSS Border on One Side Only