Try adding:
display:inline-block;
in #divtwo. If that works, I would of course add some conditional commenting for IE7
GregD
2009-01-25 04:38:46
A:
display:inline; should work for IE6
GregD
2009-01-25 04:41:45
Try to avoid conditional commenting.
Soviut
2009-01-25 04:41:50
I just tried it.display:inline-block has no affect in IE7
brianpeiris
2009-01-25 04:52:17
+5
A:
I don't know if this fixes your real problem, but I fixed your sample like this:
- Remove the float attribute from div
- Remove the clear attribute from #divtwo
- Add float: left to #divtwo and #divthree
This makes it look like your chrome sample both in Firefox and IE 7 (browsers I tested).
Nazgulled
2009-01-25 05:07:44
Your solution achieves the result without fixing the problem :)As you guessed it does not fix my "real problem".I think I might edit the question slightly to prevent this work-around (unless someone informs me that it is against etiquette)
brianpeiris
2009-01-25 05:17:13
I've edited the question. Thanks for your alternate solution though, Nazgulled.
brianpeiris
2009-01-25 05:44:42
+2
A:
I am unsure what your ultimate goal is here, but I would suggest enclosing all four <div>s inside a container element and applying a width to it, then removing the clear style from #divthree. Doing it this way will allow #divthree and #divfour to move below #divone and #divtwo without clearing them:
<!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 runat="server">
<title>IE Float Test</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<style type="text/css">
#divone, #divtwo, #divthree, #divfour
{
width: 100px;
height: 100px;
color: white;
font-size: 3em;
float: left;
}
#divone
{
background-color: red;
}
#divtwo
{
background-color: blue;
}
#divthree
{
background-color: green;
}
#divfour
{
background-color: purple;
}
#container {
width: 200px;
zoom: 1;
}
</style>
</head>
<body>
<div id="container">
<div id="divone">one</div>
<div id="divtwo">two</div>
<div id="divthree">three</div>
<div id="divfour">four</div>
</div>
</body>
</html>
The zoom property on #container is necessary to avoid the IE6/7 Escaping Floats Bug.
If the above solution isn't viable, you can add a <br> or <div> after #divtwo with the style clear: left;:
<div id="divone">one</div>
<div id="divtwo">two</div>
<br style="clear: left;" />
<div id="divthree">three</div>
<div id="divfour">four</div>
This is the technique used in a floated page layout example on westciv.com.
cowgod
2009-01-25 08:06:41
Thanks but, as I mentioned, I'd rather not edit the markup. I guess I'm looking for a CSS solution (unless I'm doing it completely wrong).The ultimate application will be part of a form, where the first and third `div`s will be checkboxes and the second and fourth `div`s will be their labels.
brianpeiris
2009-01-25 08:23:37
Upvoted. I couldn't solve this problem with CSS alone (see my answer below) and your suggestion is a valid solution.
brianpeiris
2009-10-04 07:09:31
+2
A:
Several months later...
I gave up on trying to solve this problem with CSS alone. This is an IE7 bug that you cannot avoid without touching your HTML.
The ultimate application of this floating pattern was in a form, where two of the divs were input elements and the other two divs were their corresponding labels. The pattern was used multiple times in a large form and I really wanted to find an elegant CSS-only solution.
I eventually ended up using the Object Oriented CSS Framework and wrapping all the elements with additional divs in order to create the desired layout, as OOCSS dictates. It was the only way to save my soul from IE7's CSS hell and OOCSS is not so bad once you complete your initial layout.
In truth, the general answer is that this is the sort of question you pose when you don't really know what you're doing with CSS. If you have to create a complex layout once in a blue moon then you probably don't know what you're doing; as was the case when I asked this question.
Although it is true that IE7 fails to render the CSS properly, it was also a case of mistaken scope on my part. CSS is not the ultimate layout language that a naive programmer would make it out to be and CSS is not truly independent of the structure of your HTML. Once again I've opted to take the easier way out by using the OOCSS framework when I should actually take the time to learn the fundamentals of CSS.
Alas, such is the consequence of deadlines.
brianpeiris
2009-10-04 07:06:17