First-child selector doesn't work?

why is my first <p> broken up into 2 column"? why is it not seeing my p:first-child rule?

The first <p> isn’t the “first child” of the #main div, because there are two children before it—a heading and an image. You may just have to give it a special class, or wrap an inner div around the <p>s so that the first one will actually be the first child of that inner div.

Good call ralph :slight_smile:

Since the multi-column module is only supported in Gecko & Webkit at the moment you may as well go ahead and use CSS3 to target that first <p>

What you are looking for is :first-of-type

#main p:first-of-type {
    -moz-column-count: 1;
    margin: 15px 50px;
    text-indent: 3em;

I would also wrap that html image in a floated block container (<p> or <div>) with a right margin on it.

k, thanks

In regards to that <img>, it has been known to cause problems running inline elements adjacent to blocks.
I’d wrap it in a <div> in this case so it wouldn’t conflict with your p:first-of-type


made those changes, but am having trouble wrapping the text around the image (do I just style the image to display: inline or how should it be done?\


It looks like column-count prevents a <p> from wrapping normally, instead holding it to a column layout. A simple way I can see around this is to get rid of the div around the image and place the image inside the first <p>, like so:

<p><img style="float:left" alt="Welcome" src="images/staff.jpg"> Pellentesque habitant morbi tristique ... </p>

Of course, in the real world I wouldn’t use an inline style like that.

It looks like column-count prevents a <p> from wrapping normally, instead holding it to a column layout.

I agree, it looks like it creates a new block formatting context. It behaves similar to an overflow:hidden element next to a float.

I believe I would just do away with the multi-column layout altogether on that first <p> if you don’t want the columns and you want the text to warp under the float.

You can kill the multi-column with the auto value and then the text will wrap

#main p:first-of-type {
    -moz-column-count: [COLOR=#0000cd][B]auto[/B][/COLOR];
    margin: 15px 50px;
    text-indent: 3em;

man. you guys r fast

Hah, nice one Ray. I tried everything except “auto” before giving up. I guess I should start to look at the specs. :slight_smile:

Good work guys :slight_smile:

Yes if in doubt rt*m :slight_smile:

If only I could understand the * manual. :shifty:

Off Topic:

lol - I know what you mean. I still have trouble comprehending some of the finer details - that’s why I teamed up with Tommy when writing the reference as he speaks that language fluently.

Off Topic:

Ah, so they’re in Swedish. No wonder I find them hard to understand. :slight_smile: