Why does my floated left div go to the next line in IE6 using the 960.gs?

末鹿安然 提交于 2019-12-25 11:57:21

问题


I'm using the 960 grid system to make a site (www.960.gs).

I have a 9 column wide div (grid_9) with two divs inside it (grid_5 and grid_4).

This is meant to yield one large outer div with 2 internal divs sitting side by side inside of it.

However when viewed in IE6 it displays as one larger div with two internal divs, one below the other.

In Firefox the divs sit next to each other, as they are meant to, and the same setup works fine in other parts of the site.

What is going on? I can't work it out.

Here is the html:

<div class="ContentWrapper grid_9 alpha omega">
        <div id="MainTitleWrapper" class="standardColor">
            <h2><span class="Rating"><%=Model.Rating%></span><%=Model.ScreenName%></h2>
        </div>
        <div class="MainContentWrapper standardColor">
            <div class="grid_5 alpha">
                    <h3>Ranked This Week In:</h3>
                    <div class="TagContentList">
                        <ul> some stuff</ul>
                    </div>
            </div>
            <div class="grid_4 omega">
                    <h3>Latest</h3>
                    <div class="tweet">
                    </div>
            </div>
        </div>
    </div>

回答1:


Without being able to see more of what's going on, I'd guess the content of your internal divs is pushing their width to be larger than their container. IE6 doesn't respect a container's width designation if the content pushes that width at all.

But do post more code or a link if you can!




回答2:


The line:

"and the same setup works fine in other parts of the site."

Would lead me to look at the padding, margins and width of the content within the grid_4 and grid_5 divs, from what I remember the box model is pretty flaky in IE6.

Also IE6 (and possibly later) has a problem in that italic content is always wider than you expect and could lead to the outer div (grid_4 or grid_5) being wider than you expect.




回答3:


Could be something as simple as IE6's propensity to double-pad. If you dare present the 960 grid system with a hack, try this:

padding: 10px; /* whatever the padding is supposed to be for normal browsers */
_padding: 5px; /* half of that for IE6 */

IE6 will render the _padding rule - other browsers will not. This works for any rule: normal style rule, first; IE6 _rule, after.



来源:https://stackoverflow.com/questions/1200731/why-does-my-floated-left-div-go-to-the-next-line-in-ie6-using-the-960-gs

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!