I've got four div elements floated to the left. The third div is cleared.
In Firefox and Chrome the elements are positioned as expected: The first and second divs are adjacent to each other and are above the third and fourth divs which are also adjacent to each other.
IE7 on the other hand places the fourth div adjacent to the first and second divs with the third div below.
I know I can fix it by adding a br element after the second div but I'd rather not edit the markup if I don't have to. Is there a more elegant way of fixing the problem?
I've been trying to Google for a fix for a while now but haven't found one, which is rather surprising considering how elementary the problem seems. Perhaps I'm missing something obvious, is there a reference site that lists simple CSS issues like this one or am I just ignorant about basic CSS?
Edit: I've made the sample code slightly more complex after Nazgulled "solved" the problem (see the comments). There are now four divs instead of three and the third div is cleared instead of the second.
Here is the complete source code:
<!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">
div
{
width: 100px;
height: 100px;
color: white;
font-size: 3em;
float: left;
}
#divone
{
background-color: red;
}
#divtwo
{
background-color: blue;
}
#divthree
{
background-color: green;
clear: both;
}
#divfour
{
background-color: purple;
}
</style>
</head>
<body>
<div id="divone">one</div>
<div id="divtwo">two</div>
<div id="divthree">three</div>
<div id="divfour">four</div>
</body>
</html>
Here is what is looks like in Chrome:
Here is what is looks like in IE7:
Answers:
Try adding:
display:inline-block;
in #divtwo. If that works, I would of course add some conditional commenting for IE7
Answers:
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).
Answers:
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.
Answers:
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.
No comments:
Post a Comment