Can we center those divs "IE7 and up" with variable width horizontally without using inline-block?

Question

Without:

adding any markup element there;
without using display: inline-block;
without knowing the div width;
no hacks. the code should validate.

How can we center those three divs horizontally, but making them INLINE ?

Please note: The reason that I'm avoiding inline-block, lies on the fact that IE7 should behave. Other rules that don't work on IE 7 should also be disregarded.

Is it possible ?

@pomaxa: Because inside those texts I will have other elements. So they should be block elements. — MEM, Sep 25 '12 at 09:40
If you're worried about validation why you no use conditional comments? Be smart and override the validator, there's no way to achieve this on IE7 without using the hacks on my answer — Ahmad Alfy, Sep 25 '12 at 09:45
Relating "smart" with "trickiness" is something that bothers me ;) Other, then that, I'm starting to believe, that, indeed, there's no way to make this happen with those conditions. So the answer to my question should be a clearly "No. That's not possible. Forget about it, or change one of your conditions." :( — MEM, Sep 25 '12 at 09:50

Ahmad Alfy · Accepted Answer · 2012-09-25T09:53:02.047

4

Like this - http://jsfiddle.net/mMPMh/10/

Or this - http://jsfiddle.net/mMPMh/14/ ? This one works with IE7

As for hacks, it can be served using conditional statement like

<!--[if lt IE 8]>
    <link rel="stylesheet" type="text/css" href="ie7-and-down.css" />
<![endif]-->

Or using this on your HTML (from HTML5BP)

<!DOCTYPE html>
<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->

And serve the style like this :

.lt-ie8 #one,
.lt-ie8 #two,
.lt-ie8 #three {
    display:inline;
    zoom:1;
}

No hacks

edited Sep 25 '12 at 09:53

answered Sep 25 '12 at 09:32

Ahmad Alfy

13,107
6
65
99

that DOES use hacks for trigger haslayout on ie returning validation errors. I can't use hacks. – MEM Sep 25 '12 at 09:46
It's the best possible solution so far. :) Thanks a lot. – MEM Sep 25 '12 at 10:01

pomaxa · Answer 2 · 2012-09-25T09:43:29.120

0

UPD: After you update your questionyou can use for IE display:inline;, maybe it will resolve your issue?

Like this - http://jsfiddle.net/mMPMh/4/ ?

remove float, set clear, and give if you need height and width.

edited Sep 25 '12 at 09:43

answered Sep 25 '12 at 09:25

pomaxa

1,740
16
26

You might have noticed that I have already misread it like that ;-) No width setting. – Michael Krelin - hacker Sep 25 '12 at 09:27
The problem here is that `display: block` element has a known width of being wider than life, so the requirement to stick to block and be ignorant of width is tricky. – Michael Krelin - hacker Sep 25 '12 at 09:28
@pomaxa `display: inline` will not work because that will convert my elements to inline elements, while they should stay block elements. :( – MEM Sep 25 '12 at 09:53

Can we center those divs "IE7 and up" with variable width horizontally without using inline-block?

2 Answers2

Linked

Related