Why doesn't this case of display inline work?

Question

I'm trying to arrange the content like a 2 X 3 table would, but using css. However when I try to use inline-block it doesn't work(I have tried multiple browsers). See the items tagged with the "content" class.This is what I'm trying to do "http://aggiebass.net63.net/" Edit: After changing ".content div ul li" to ".content ul li" the text still doesn't act correctly.

<head><style>
  .content{
    background-color:white;
    margin:auto;
    width:80%;
  }
  .content img{
    width:200px;
    height:250px;
  }
 .content ul li{
    display:inline-block;
    list-style:none;
</style></head><body>
  <div class="content">
    <ul>
      <li><div class="tbox">
        <img src="Calendar.jpg" >
        <h2>Calendar</h2>
        <p>Check here to moniter meetings and other events. Additionally this calendar can be synchronized with other calendar programs.</p>
      </div></li>
      <li><div class="tbox">
        <img src="Calendar.jpg" >
        <h2>Resources</h2>
        <p>When you join BASS you not only benafit from a strong community but also from our club resources such as our class notes & study guide database.</p>
      </div></li>
      <li><div class="tbox">
        <img src="Contact.jpg" >
        <h2>Newsfeed</h2>
        <p>Catch up on the latest club news. Check here for anouncments and details on recent club events. This feed is also availible on facebook.</p>
      </div></li>
    </ul>
  </div>
</body></html>

This is why I just DGAF and use tables anyway. -shrugs- If I want something to look like a table, I use a table. Much easier. — Niet the Dark Absol, Aug 07 '14 at 22:07
You should consider using `display:table-row` and `display:table-cell` to transform semantic markup into an actual internal table-based layout. — Phrogz, Aug 07 '14 at 22:39
Your code as posted (whose indentation I have 'corrected') is missing a closing `}` on your last CSS rule. It's also missing an opening `` tag, but I assume you have that. — Phrogz, Aug 07 '14 at 22:43

score 4 · Answer 1 · answered Aug 07 '14 at 22:09

4

Probably because your CSS is incorrect. .content div ul li is looking for a div descendant of .content (and there isn't one). It should be:

.content ul li {
    display:inline-block;
    list-style:none;
}

jsFiddle example

answered Aug 07 '14 at 22:09

j08691

204,283
31
260
272

I made the changes you suggested, but the text still expands past the pictures for some reason. – NickG Aug 07 '14 at 22:28
1

That's because your container div is wider than the pictures. The text fills the width but the images don't. – j08691 Aug 07 '14 at 22:54

score 1 · Answer 2 · answered Aug 07 '14 at 22:09

1

.content div ul li does not exist, instead you should use:

.content ul li{
    display:inline-block;
    list-style:none;
}

answered Aug 07 '14 at 22:09

Steve Sanders

8,444
2
30
32

score 1 · Answer 3 · answered Aug 07 '14 at 22:13

1

Try changing

.content div ul li

to

.content ul li

answered Aug 07 '14 at 22:13

maioman

18,154
4
36
42

score 1 · Answer 4 · answered Aug 07 '14 at 22:15

1

You have a error in your CSS You are not cascading your element correctly. I think you wanted to do something like

div.content ul li{
    display:inline-block;
    list-style:none;
}

Not

.content div ul li{
    display:inline-block;
    list-style:none;
}

The second one is not valid for your HTML structure

answered Aug 07 '14 at 22:15

bn00d

1,126
3
15
21

What is the name of that technique? Is it called cascading? – NickG Aug 07 '14 at 22:18
1

Actually, @bn00d, hierarchical descendant selectors in CSS are unrelated to the word 'cascading' in the title. "Cascading" means that multiple "conflicting styles can be applied to the same document and there is a well-defined "cascade" of how they are applied. See: http://stackoverflow.com/questions/1043001/what-is-the-meaning-of-cascading-in-css – Phrogz Aug 07 '14 at 22:45
See also how the co-author of CSS defines it: http://people.opera.com/howcome/2006/phd/#h-357 – Phrogz Aug 07 '14 at 23:09
@Phrogz I'll take my comment back, my mistake – bn00d Aug 08 '14 at 15:09

score 0 · Answer 5 · answered Aug 07 '14 at 22:39

0

Correcting the syntax fixed the issue for the pictures, but still let the paragraphs underneath sprawl.

Correcting the syntax and adding a class for the paragraphs seems to work.

  div.tbox {
    width:200px;
    padding:10px;
  }

answered Aug 07 '14 at 22:39

NickG

138
1
12

Why doesn't this case of display inline work?

5 Answers5