ansaurus

Question

How to have 2 adjacents blocks without display:inline-block?

Answer 1

A:

Try this:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
<html>
<head>
<style type="text/css">
.img {
    display: block;
    position: absolute;
    width: 17px;
    height: 15px;
    background-color: #FD3;
    border-style: solid;
    border-width: 3px;
}
.leftimg {
    top: 0;
    left: 0;
}
.rightimg {
    top: 0;
    left: 23px;
}
.txt {
    display: inline;
}
.parent {
    display: inline;
    position: relative;
    padding: 0 0 0 46px;
}
</style>
</head>
<body>
Follow Me
<div class="parent ">
    <div class="img leftimg"></div>
    <div class="img rightimg"></div>
    <div class="txt">(a comment)</div>
</div>
</body>
</html>

I do not have IE to test, but anyway, don't forget the doctype, IE behaves differently without it.

treznik 2009-10-16 14:26:26

Well it basically works...but this is not I wanted.In my application, I have many <img> elements !! So I don't want to define a new class with an absolute position for each <img>. That's why there is a <code>float: left;</code>

fabien7474 2009-10-17 12:01:43

Answer 2

A:

it's lame, but this works in Chrome 3.0, Firefox 3.5, IE 6, 7 and 8

<html><head>
<style type="text/css">
  .img {
    display: inline-block;
    width:17px;
    height:15px;
    background-color: #FD3;
    border-style:solid;
  }

  .parent, .txt {
    display: inline;
  }
</style>

<!--[if lte IE 7]>
  <style type="text/css">
    .img {
      display: inline;
    }

    .parent, .txt {
      display: inline;
    }
  </style>
<![endif]-->

<!--[if IE 8]>
  <style type="text/css">
    .img {
      display: inline;
    }
  </style>
![endif]-->

</head><body>
Follow Me
<div class="parent ">
<div class="img"></div>
<div class="img"></div>
<div class="txt">(a comment)</div>
</div></body></html>

Brad Cupit 2009-10-16 14:38:48

Using your code, I don't have the same visual effect in IE8 and FF3...You can try here: http://www.w3schools.com/CSS/tryit.asp?filename=trycss_display

fabien7474 2009-10-17 12:03:19

Answer 3

+1 A:

Actually, inline-block works in IE6 and IE7, just in a strange way.

Basically, IE6 and IE7 implement inline wrong. When a naturally inline element has layout (google for "hasLayout" for more info on that) it will act like an inline-block element and respect width/height set on it.

So swap out those <div class=image>s with <span>s so they're naturally inline, and then all you have to do is trigger hasLayout on them and you're good to go. My typical method is to set a "zoom:1" property on the elements - it's an IE-only properly that won't do anything, but will trigger hasLayout.

An even better solution, of course, is to just use <img> elements, if that's possible at all.

Xanthir 2009-11-19 23:09:31

ansaurus

tags:

views:

answers:

How to have 2 adjacents blocks without display:inline-block?

related questions