Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    text
    copied!<p>Several months later...</p> <p>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.</p> <p>The ultimate application of this floating pattern was in a form, where two of the <code>div</code>s were input elements and the other two <code>div</code>s 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.</p> <p>I eventually ended up using the <a href="http://wiki.github.com/stubbornella/oocss" rel="nofollow noreferrer">Object Oriented CSS Framework</a> and wrapping all the elements with additional <code>div</code>s 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.</p> <p><br/></p> <p>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.</p> <p>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.</p> <p>Alas, such is the consequence of deadlines.</p>
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload