Clear float and prevent text wrap without hack

Question

I am making a list of blurbs with images that can be used anywhere throughout our site. I want it to be really flexible, not have a specified width, and work properly with no image and with different sizes of images. If the text for a block is longer than its image, I want the text not to wrap under the image.

I made a fiddle of pretty much exactly how I want it. https://jsfiddle.net/4dbgnqha/1/

Now the problem is, our senior developer told me I can't use overflow:hidden to clear the float or to prevent the wrap because:

"Overflow hidden spawns an object to wrap around the element you specified that on. By doing so it is able to constrain the perceived viewable area on that element. This invokes quarks mode in IE, which has a cascading effect for other elements on that page and how they will be interprited"

So whether or not I agree with that, I can't use it. I also can't use a clearfix hack because he said:

"clearfix dumps before:: and after:: elements into the DOM, we don’t want this sort of thing to be complicating layout, especially when we’re traversing through the DOM dealing with dynamically added elements and potential 3rd party code"

Now, I tried to find a way to build the layout without these hacks, but I haven't quite been able to get it with the constraints I want (no fixed width on the images, or the container).

Here's the sample CSS (with the "hacks"):

.item {
    overflow: hidden;
    margin-bottom: 20px;
}

.item img {
    float:left;
    margin-right: 10px;
}

.item p {
    margin: 0;
    overflow: hidden;
}

Is it good enough: https://jsfiddle.net/4dbgnqha/3/ for senior developer? clear:both is allowed, i guess... :) — sinisake, Apr 07 '15 at 20:42
That works for clearing the float, but doesn't fix text wrapping under the image @nevermind — eshellborn, Apr 07 '15 at 20:48
He is quite wrong. CSS declarations don't trigger quirks mode in IE. Besides, `overflow: hidden` won't limit the visible area of elements unless their sizes are specified explicitly. — Hashem Qolami, Apr 07 '15 at 21:02
Do you know of any resources to back up those statements? @HashemQolami — eshellborn, Apr 07 '15 at 21:04
Rendering a web page in quirks mode [depends](http://stackoverflow.com/q/13499536/1725764) [on](http://stackoverflow.com/q/3949941/1725764) [document](http://stackoverflow.com/questions/5374099/how-do-i-force-internet-explorer-to-render-in-standards-mode-and-not-in-quirks) [doctype](http://stackoverflow.com/questions/6529728/html5-doctype-putting-ie9-into-quirks-mode) and/or `X-UA-Compatible` HTTP header; But CSS declarations? well, that's new to me, and [I'd appreciate if your lead developer suggests any references for that](http://www.quirksmode.org/css/quirksmode.html). — Hashem Qolami, Apr 07 '15 at 21:13
Also `::before`/`::after` pseudo-element content does not appear in the DOM and [it is not possible to get access to that by JavaScript](http://stackoverflow.com/questions/5041494/manipulating-css-pseudo-elements-such-as-before-and-after-using-jquery). — Hashem Qolami, Apr 07 '15 at 21:22

Turnip · Accepted Answer · 2015-04-07T20:53:36.010

For this specific example you could use display: table-row / table-cell (unless your dev has a beef with this too)...

.item {
    margin-bottom: 20px;
    display: table;
}

.item img {
    margin-right: 10px;
    display: table-cell;
    vertical-align: top;
}

.item p {
    margin: 0;
    display: table-cell;
    vertical-align: top;
}

<div class="container">
    
    <div class="item">
        <img src="//placehold.it/100x100">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum porttitor nisi purus, eu pretium ipsum ultricies eu. Nulla eleifend arcu dolor, et vestibulum ligula lacinia sed. Sed viverra tortor lorem, molestie volutpat nisi volutpat a. Suspendisse dolor lacus, ultrices eu quam vel, lobortis placerat nibh.</p>
            
    </div>
        
    <div class="item">
        <img src="//placehold.it/150x100">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    </div>
        
    <div class="item">
        <img src="//placehold.it/100x200">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum porttitor nisi purus, eu pretium ipsum ultricies eu. Nulla eleifend arcu dolor, et vestibulum ligula lacinia sed. Sed viverra tortor lorem, molestie volutpat nisi volutpat a. Suspendisse dolor lacus, ultrices eu quam vel, lobortis placerat nibh.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum porttitor nisi purus, eu pretium ipsum ultricies eu. Nulla eleifend arcu dolor, et vestibulum ligula lacinia sed. Sed viverra tortor lorem, molestie volutpat nisi volutpat a. Suspendisse dolor lacus, ultrices eu quam vel, lobortis placerat nibh.</p>
    </div>
        
    <div class="item">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum porttitor nisi purus, eu pretium ipsum ultricies eu. Nulla eleifend arcu dolor, et vestibulum ligula lacinia sed. Sed viverra tortor lorem, molestie volutpat nisi volutpat a. Suspendisse dolor lacus, ultrices eu quam vel, lobortis placerat nibh.</p>
    </div>
        
    <div class="item">
        <img src="//placehold.it/100x100">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum porttitor nisi purus, eu pretium ipsum ultricies eu. Nulla eleifend arcu dolor, et vestibulum ligula lacinia sed. Sed viverra tortor lorem, molestie volutpat nisi volutpat a. Suspendisse dolor lacus, ultrices eu quam vel, lobortis placerat nibh.</p>
    </div>
    
</div>

Fiddle version

Browser support is pretty universal - CANIUSE

That seems to work really well. Can you explain to me how display: table and table-cell work? — eshellborn, Apr 07 '15 at 20:49
They cause elements to behave like traditional HTML table elements with some limitations; there is no `colspan / rowspan` equivalent for instance — Turnip, Apr 07 '15 at 20:53
Why does using these properties solve my layout problem though? Do you think this method would satisfy my senior developer? (is this a "hacky" method at all?) — eshellborn, Apr 07 '15 at 20:57
It solves your problem because it removes the need for floats altogether, and therefore there are no floats to clear. I certainly would not define a layout method that has existed in every major browser since IE7 to be hacky — Turnip, Apr 07 '15 at 21:01
Your dev's claim that `clearfix dumps before:: and after:: elements into the DOM..` is wrong BTW. `::before` and `::after` _pseudo_-elements don't actually exist in the DOM _at all_. I think he misunderstands the concept. — Turnip, Apr 07 '15 at 21:05

Clear float and prevent text wrap without hack

1 Answers1

Linked