ansaurus

Question

Display Img and Div inline - it's not rendered inline

Answer 1

A:

Try this:

<div style="display: inline-block;"></div>

It's actually part of the CSS2 standard to display an inline thing as a block like a character.

One thing is, though, that <div>s are not supposed to occur inside of a <p> element, so you should instead use <span> tags.

amphetamachine 2010-06-05 19:48:27

Older versions of IE don't like `inline-block` on default `block` elements. Use a default `inline` element such as a span instead.

Joel Potter 2010-06-05 19:49:49

@Joel Potter - Read the original question; he wanted a block-level element with a `height` and `width` property. And older versions of IE are pretty much not to be trifled with since Google stopped supporting them.

amphetamachine 2010-06-05 19:52:27

A `<span style="display:inline-block">` is exactly the same as a `<div style="display:inline-block">`. The only difference is more browsers support it. Why not go with the wider supported approach? (Just because Google does something doesn't mean everyone will or must or can.)

Joel Potter 2010-06-05 20:04:06

Answer 2

A:

I'm not sure exactly what you are trying to achieve. But it sounds like you want to float an image left with text in the div.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
<html>
<head>
    <title>Test Page</title>
<style>
.wrap {
    border: solid 2px green;
    width: 600px;
    overflow:hidden;
}
.myimg {
    display:inline; 
    margin: 10px; 
    padding:0px; 
    border:solid 2px green; 
    height:70px; width: 70px;
    float:left;
}
</style>
</head>
<body>      
    <div class="wrap">
        <img src="myimagepath" class="myimg" />
        <p>"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p>
    </div>
</body>
</html>

edl 2010-06-05 20:37:24

Answer 3

A:

Hi there, Thanks for trying to help out.

First - the solution: I've added few attributes to image tag and that helped a lot: hspace="0" vspace="0" align="top" border="0"

Second: explanation: Since I wanted to do "inline" (or "inline-block") thing, I had to figure out how inline/inline-block elements are laid-out by browsers. If you read CSS2 layout spec, you will soon find out that there is an issue with image and divs. Problem is with vertical-align - where image is aligned/rendered comparing to baseline, while divs go for bottom-line (or vice versa). That caused my example not be aligned. Setting above mentioned params for the image tag helped.

Remarks: Due to the complex history of IE5,6,7, Firefox, Gecko, WebKit, Chrome, CSS2 and BoxModel, there are some shortcomings to Layout model. Original problem comes from IE5 and 6 handling BoxModel in different way from CSS standard. That's maybe the main reason for having quirks mode and DTD standards. However, this is a broad topic, if you want to find out more, I recoomend readin CSS2 spec and recommendation. If you want to discuss it more - feel free to contact me via PM

Thanks again to all for helping and good luck with your Layouts

Kind regards MP

MAP 2010-06-13 07:17:07

ansaurus

tags:

views:

answers:

Display Img and Div inline - it's not rendered inline

related questions