CODEWITHSUNDEEP
xhtmlcss
PeanutsMonkey
PeanutsMonkey

Reputation: 7095

Why am I not able to use inline-block on div tags?

I have the following sample code and noticed that if I attempt to use the declaration display:inline-block on the div element content, it doesn't place its descendants or children side by side.

The only way for me to have the p element appear adjacent to one another is to apply the style to the p selector. Does this mean I cannot use display: inline-block on descendants, children and siblings?

Code

<DOCTYPE public HTML "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
        <meta http-equiv="content-type" content="text/html; charset="UTF-8" />
        <meta http=equiv="content-language" content="en-us" />
        <meta name="keywords" content="" />
        <meta name="description" content="" />
        <meta name="author" content="" />
        <meta name="copyright" content="&copy; 2012" />
        <title>Inline-block</title>

        <base href="" />
        <link rel="stylesheet" href="" />

        <style type="text/css" media="all">

        p {
            display: inline-block;
            width: 100px;
        }

        </style>
    </head>

    <body>
        <div id="content">
            <p>paragraph 1</p>
            <p>paragraph 2</p>
        </div>
    </body>
</html>

Upvotes: 0

Views: 116

Answers (2)

prodigitalson
prodigitalson

Reputation: 60403

You need to set the property on the element you want displayed that way. The display property is not inherited by children. Also it should be noted they IE7 only accepts inline-block on elements that are inline by default.

Upvotes: 1

Jon Friskics
Jon Friskics

Reputation: 282

inline-block should apply to siblings, but not children. Try something like this:

#content p {
   display: inline-block;
}

Upvotes: 1

Related Questions